码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-20 17:23:28      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:mic   down   src   tle   col   setattr   ml2   img   can   

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

 

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

标签:mic   down   src   tle   col   setattr   ml2   img   can   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!