父组件调用方法及 html2canvas图片下载
toImage() {
if (this.chartInfo.chartType === "digit") {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
}).then((canvas) => {
let url = canvas.toDataURL("image/png");
this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址
let a = document.createElement("a"); // 生成一个a元素
a.download = this.chartInfo.config.style.title.text || "echarts"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.click();
a.remove();
});
} else {
this.$refs.RedEChart.chartExport();
}
},
echart 图片生成下载
chartExport() {
const targetChart = this.myChart;
const chartImgUrl = targetChart.getDataURL({
pixelRatio: 2,
backgroundColor: "#fff",
});
const fileName = "echarts";
this.downloadBase64Image(chartImgUrl, fileName);
},
downloadBase64Image(base64, fileName) {
// 创建一个虚拟的a标签
let link = document.createElement("a");
link.href = base64;
link.download = fileName;
// 触发点击事件进行下载
link.click();
// 下载完成后删除a标签
setTimeout(function () {
document.body.removeChild(link);
}, 100);
},