import html2canvas from 'html2canvas'
downLoad(url){
var oA = document.createElement("a");
oA.download = '';// 设置下载的文件名,默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
},
// 转成图片
canvasToImage(canvas) {
document.getElementById('image').setAttribute('src',canvas.toDataURL("image/png"))
//this.downLoad(this.saveAsPNG(canvas))
},
saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
},
createpdf () {
html2canvas(document.getElementById('chartBox')).then((canvas)=> {
document.getElementById('canvas').appendChild(canvas)
this.downLoad(this.saveAsPNG(canvas))
// 转成图片
// this.canvasToImage(canvas)
})
}
使用html2canvas实现HTML页面的echarts图表转成长图片
这篇博客介绍了如何利用html2canvas库将网页内容转换为canvas,进而将其保存为PNG图片并下载。通过downLoad方法实现文件下载,同时提供了canvasToImage方法将canvas转换为图片。此外,createpdf函数用于创建PDF,整个流程展示了前端如何进行静态内容捕获和导出。
摘要由CSDN通过智能技术生成