[vue] 将显示的内容导出为图片 html2canvas
·
npm install html2canvas
import html2canvas from "html2canvas"
// 导出多张图表为一张图片
// dmo元素里的内容转换为canvas,并将canvas下载为图片
const download = () => {
// 转换成canvas
html2canvas(document.getElementById("echarts")).then(function (canvas) {
// 将 Canvas 转换为 Base64 字符串
let img = canvas.toDataURL("image/png");
//
let img1 = img.replace("image/png", "image/octet-stream");
// 创建a标签,实现下载
var creatIMg = document.createElement("a");
creatIMg.download = "图表.png"; // 设置下载的文件名,
creatIMg.href = img1 ; // 下载url
document.body.appendChild(creatIMg);
creatIMg.click();
creatIMg.remove(); // 下载之后把创建的元素删除
});
};
更多推荐



所有评论(0)