vue中使用html2canvas简单教程

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);

                 });

             });

         })

顶

0