vue编写一个递归函数，遍历两个数组，如果两个数据id对应，则将对应name值传递到页面，然后将页面使用html2canvas转换为图片

在Vue中，你可以使用递归函数配合数组操作来实现这个功能。首先，假设你有两个数组`array1`和`array2`，它们都有'id'和'name'属性。下面是一个基本的示例：

<template>
  <div id="container" v-for="(item1, index) in array1">
    <!-- 使用v-if检查id是否匹配 -->
    <div v-if="findItemById(array2, item1.id)">
      {{ item1.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: [
        // 这里是你的数组一内容
      ],
      array2: [
        // 这里是你的数组二内容
      ]
    };
  },
  methods: {
    findItemById(arr, id) {
      // 递归查找
      return arr.find(item => item.id === id) ? item.name : this.findItemById(arr.slice(1), id); // 如果找到返回name，否则继续递归搜索
    }
  }
};
</script>

<!-- HTML2Canvas 部分通常需要借助库如vue-html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
this.$nextTick(() => {
  html2canvas(document.getElementById('container'), {
    onrendered: function(canvas) {
      // 将canvas转换为图片并下载或者保存
      var img = document.createElement('img');
      img.src = canvas.toDataURL();
      // 下载图片或显示
      downloadImage(img);
    }
  });
});
function downloadImage(img) {
  var link = document.createElement('a');
  link.href = img.src;
  link.download = 'result.png';
  link.click();
}
</script>

在这个例子中，`findItemById`方法会递归地在数组`array2`中查找与`array1`元素对应的项。找到则返回其`name`值，否则继续下一层递归。最后通过HTML2Canvas将渲染后的DOM导出为图片。