vue使用html2canvas生成图片并保存到本地

1、添加html2canvas插件

2、在script下引用插件

import html2canvas from ‘html2canvas‘;

3、使用方法调用

<!--二维码HTML-->
    <el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="340px">
      <div slot="footer" class="dialog-footer">
        <div id="qrCode" ref="qrCodeDiv"></div>
        <el-button type="warning" @click="saveQrCode">保存二维码</el-button>
      </div>
    </el-dialog>

<!--方法-->
// 保存二维码为图片
    saveQrCode () {
      html2canvas(this.$refs.qrCodeDiv).then(canvas => {
        const link = document.createElement(‘a‘)
        link.href = canvas.toDataURL()
        link.setAttribute(‘download‘, this.qrCodeTitle + ‘.png‘)
        link.style.display = ‘none‘
        document.body.appendChild(link)
        link.click()
      })
    }

参考：https://www.cnblogs.com/shcs/p/11960593.html

原文地址：https://www.cnblogs.com/masha2017/p/12532518.html