vue下使用html2canvas保存html为png并下载图片
效果图:步骤:1.先安装html2canvasnpm install --save html2canvas注意:我这里报错:npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://regi...
·
效果图:
步骤:
1.先安装html2canvas
npm install --save html2canvas
注意:我这里报错:npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/html2canvas failed, reason: connect ETIMEDOUT 104.16.18.35:443
解决办法:
npm install jspdf.debug --registry=https://registry.npm.taobao.org
2.在需要的地方导入import html2canvas from "html2canvas";
3.代码:
//导出
createPicture() {
html2canvas(document.body, {
backgroundColor: null
}).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);
}
更多推荐
已为社区贡献6条内容
所有评论(0)