vue 前端将html 导出成图片，并下载压缩包_vue html转png

import JSZip from "jszip";
import FileSaver from "file-saver";
import domToImage from "dom-to-image";
import * as changedpi from "changedpi";

    async toImage2(downFilelist) {
      this.notify = this.$notify.success({
        title: "提示",
        message: "正在导出文件",
        showClose: false,
        duration: 0,
      });
      var node3;
      var dataUrl;
      var node2;
      var dataUrl2;
      let filelist = [];
      let list = [];
      for (let n = 0; n < downFilelist.length; n++) {
        let e = downFilelist[n];
        console.log(e, "=e111");
        try {
          const options = {
            width: 1048, // 高度宽度自行设定
            height: 674,
            scale: 2, // 后面的字表示需要把一个像素转为几个像素
          };
          node3 = eval("this.$refs.imageDom" + n)[0];

          dataUrl = await domToImage.toPng(node3, { ...options });
          dataUrl = changedpi.changeDpiDataUrl(dataUrl, 300);

          node2 = eval("this.$refs.imageDom2" + n)[0];
          dataUrl2 = await domToImage.toPng(node2, { ...options });
          dataUrl2 = changedpi.changeDpiDataUrl(dataUrl2, 300);
          list.push(
            {
              fileDownUrl: dataUrl,
              fileDownName: e.school_name + "_" + e.name + "正面",
            },
            {
              fileDownUrl: dataUrl2,
              fileDownName: e.school_name + "_" + e.name + "反面",
            }
          );
          if (n == downFilelist.length - 1) {
            this.downFileZip(list);
          }
        } catch (e) {
          throw new Error(e);
        }
      }

    },

 downFileZip(base64Images) {
      const zip = new JSZip();
      const imgFolder = zip.folder("");
      console.log(base64Images, "=base64Images");
      base64Images.forEach((base64, index) => {
        console.log(base64.fileDownName, "=fileDownName");
        // 提取base64的MIME类型
        const mimeType = base64.fileDownUrl.split(";")[0].split(":")[1];
        // 提取base64的数据
        const data = base64.fileDownUrl.split(",")[1];
        // 将base64数据转换为二进制字符串
        const binaryString = atob(data);
        // 将二进制字符串转换为Uint8Array
        const uintArray = new Uint8Array(binaryString.length);
        for (let i = 0; i < binaryString.length; i++) {
          uintArray[i] = binaryString.charCodeAt(i);
        }
        // 添加图片到压缩文件夹; `${base64.fileDownName}.${mimeType.split("/")[1]}`,
        imgFolder.file(
          `${base64.fileDownName}.${mimeType.split("/")[1]}`,
          uintArray,
          {
            binary: true,
          }
        );
      });
      let that = this;
      // 生成压缩文件
      zip.generateAsync({ type: "blob" }).then(function (content) {
        // 使用FileSaver保存文件
        FileSaver(content, "压缩包名称.zip");
        that.$notify.success({
          title: "提示",
          message: "导出成功",
          showClose: false,
        });
        that.notify.close();
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94