在近期的项目开发过程中,遇到点击保存,将当前的页面地图生成一个图片并保存下来,通过网上查找,找到html2canvas这个插件,并在此记录使用方法及解决一下小的问题。
一、安装html2canvas
npm install --save html2canvas
二、页面引入及使用
import html2canvas from "html2canvas";
export default {
// 导出
handleDownload() {
html2canvas(document.body, {
backgroundColor: null,
}).then((canvas) => {
let imageurl = canvas.toDataURL("image/png");
let imagename = "态势图";
this.fileDownload(imageurl, imagename);
});
},
// 下载截屏图片
fileDownload(downloadUrl, downloadName) {
console.log(downloadUrl, downloadName,'----------------downloadUrl,
downloadNamedownloadUrl, downloadName');
let alink = document.createElement("a");
alink.style.display = "none";
alink.href = downloadUrl;
alink.download = `${downloadName}.jpg`;
document.body.appendChild(alink);
alink.click();
document.body.removeChild(alink);
},
}