码上敲享录 > vue.js常见问题详解 > vue中使用html2canvas简单教程

vue中使用html2canvas简单教程

上一章章节目录下一章 2020-08-14已有1665人阅读 评论(0)

vue中使用html2canvas


解决方法:

1.下载依赖包

npm install --save html2canvas或者cnpm install --save html2canvas


2.引入html2canvas对象

import html2canvas from 'html2canvas'


3.用法

标签

<div id="range"  ref="range">生成图片内容</div>

<div id="downloadBill"  >生成图片按钮</div>


2.将页面标签中内容生成图片代码

    this.$nextTick(function () {

             var self = this;

             $("#downloadBill").click(function () {//self.$refs.range

                 html2canvas(self.$refs.range).then(function (canvas) {

                     

var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = canvas.toDataURL("image/png");
save_link.download = 'qr';
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);


                 });

             });

         })


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交