vue中将html页面转为图片并且下载该图片

1.下载 html2canvas

npm install html2canvas

2.对应页面引入该插件

import html2canvas from 'html2canvas';

3.具体用法 （要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);）

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

4.转为图片并且下载

 在methods方法中：

toImage() {
    html2canvas(this.$refs.imageDom, {
        backgroundColor: '#ffffff'
    }).then(canvas => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
    })
},
fileDownload(downloadUrl) {
    let aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = downloadUrl;
    aLink.download = "监控详情.png";
    // 触发点击-然后移除
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
},

 效果图：