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