dom转换图片并下载html2canvas

最新推荐文章于 2024-02-05 10:37:15 发布

原创最新推荐文章于 2024-02-05 10:37:15 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html2canvas #dom转图片

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

es6

4 篇文章

订阅专栏

本文介绍了一种使用html2canvas将网页内容转换为PNG图像，并通过JavaScript实现下载该图像的方法。具体步骤包括创建画布，转换为数据URL，然后使用Blob对象和a标签触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

exportReport() {
      let a = document.createElement('a');
      html2canvas(this.$refs.png这个改成自己的).then(canvas=> {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        a.setAttribute("download", "测试图片.png")
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    dataURLToBlob(dataurl) {//ie 图片转格式
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type: mime})
    },