vue下使用html2canvas保存html为png并下载图片

最新推荐文章于 2024-08-20 11:35:04 发布

吃鱼吐泡泡

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量5.3k

点赞数

分类专栏：前端文章标签： html2canvas 下载图片

本文链接：https://blog.csdn.net/animatecat/article/details/85252576

版权

前端专栏收录该内容

71 篇文章 2 订阅

订阅专栏

效果图：

步骤：

1.先安装html2canvas

 npm install --save html2canvas

注意：我这里报错：npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/html2canvas failed, reason: connect ETIMEDOUT 104.16.18.35:443

解决办法：

npm install jspdf.debug --registry=https://registry.npm.taobao.org

2.在需要的地方导入import html2canvas from "html2canvas";

3.代码：

 //导出
    createPicture() {
      html2canvas(document.body, {
        backgroundColor: null
      }).then(canvas => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
      });
    },
    //下载图片
    fileDownload(downloadUrl) {
      let aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = downloadUrl;
      aLink.download = "监控详情.png";
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    }