vue-html2canvas Vue3 使用

在Vue3中使用vue-html2canvas，你需要先安装依赖包html2canvas和vue-html2canvas。可以通过以下命令进行安装：

npm install html2canvas vue-html2canvas

安装完成后，在需要使用的页面中引入组件，并注册到Vue实例中。例如：

import VueHtml2Canvas from 'vue-html2canvas';

export default {
  components: {
    VueHtml2Canvas,
  },
  // ...
}

然后，在模板中使用VueHtml2Canvas组件，并传入需要转换为图片的DOM节点的id。例如：

<template>
  <div>
    <vue-html2canvas :id="'mycanvas'" @complete="saveImg"></vue-html2canvas>
  </div>
</template>

最后，在methods中定义saveImg方法，用于下载生成的海报图片到本地。可以参考以下代码：

methods: {
  saveImg(canvas) {
    var url = canvas.toDataURL();
    var a = document.createElement('a');
    a.download = '海报二维码';
    var event = new MouseEvent('click');
    a.href = url;
    a.dispatchEvent(event);
  },
},

这样就可以在Vue3中使用vue-html2canvas来生成并下载海报图片了。