使用html2canvas实现HTML页面的echarts图表转成长图片

最新推荐文章于 2022-12-30 16:55:49 发布

92huahua

最新推荐文章于 2022-12-30 16:55:49 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： js 实现HTML转成图片 echarts转成长图

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/121384307

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用html2canvas库将网页内容转换为canvas，进而将其保存为PNG图片并下载。通过downLoad方法实现文件下载，同时提供了canvasToImage方法将canvas转换为图片。此外，createpdf函数用于创建PDF，整个流程展示了前端如何进行静态内容捕获和导出。

摘要由CSDN通过智能技术生成

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)
   })
}