工具类

表格转图片

本着效率的原则，决定借助互联网大法，最终选择了 HTML2CANVAS，它是一个 JS 脚本，封装了 Canvas 组件。

下载地址
https://html2canvas.hertzen.com/
npm安装
npm install --save html2canvas
脚本导入
http://html2canvas.hertzen.com/dist/html2canvas.min.js

对象方法：

调用 html2canvas 方法，方法有两个参数。执行函数中有一个参数canvas为<canvas></canvas>组件，将该组件直接添加到 body 中，当然也可以根据实际需求放到指定的元素中，例如：模态框等

参数一：元素对象，要转换为图片的元素对象；

参数二：配置项：略

html2canvas(element, options) 中的 options 参数支持很多配置项，其中包括

选项	类型	说明
`x`	`number`	截图区域的起始 X 坐标（相对于整个页面）
`y`	`number`	截图区域的起始 Y 坐标
`width`	`number`	截图区域的宽度
`height`	`number`	截图区域的高度
`scrollX`	`number`	页面滚动的 X 偏移量，会影响渲染的起点
`scrollY`	`number`	页面滚动的 Y 偏移量
`windowWidth` / `windowHeight`	`number`	模拟的窗口大小，用于截图超出可视范围的内容
`backgroundColor`	`string`	背景色（默认白色）
`scale`	`number`	放大比例，影响清晰度
`useCORS`	`boolean`	是否启用跨域图片捕获

使用示例

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>铭牌</title>
    <style>
      .nameplate-vertical {
        width: 260px;
        border: 2px solid #333;
        font-family: Arial, sans-serif;
        font-size: 11px;
        padding: 8px;
        background-color: #fff;
        border-radius: 10px;
      }
      .brand-v {
        padding-bottom: 10px;
        border-bottom: 1px solid #333;
        .brand-t {
          font-size: 18px;
          font-style: italic;
        }
        .brand-m {
          font-size: 14px;
          margin-left: 120px;
        }
      }
      .spec-v div {
        margin-top: 5px;
        margin-bottom: 4px;
        border-bottom: 1px dotted #eee;
        padding-bottom: 2px;
        width: 100%;
      }
      .spec-label {
        font-weight: bold;
        display: inline-block;
        width: 110px;
      }
      .spec-value {
        display: inline-block;
        width: 140px;
        word-break: break-all;
      }

      .caution-v {
        margin-top: 10px;
        font-size: 9px;
        color: #ff0000;
        border-top: 1px solid #eee;
        padding-top: 5px;
      }
      .img {
        width: 250px;
        height: auto;
        border: 1px solid #ccc;
      }
      /* 将铭牌放到屏幕外，而不是隐藏 */
      #hidden-template {
        /* 
        margin-left: 20px;
        display: flex;
        justify-content: start;
        align-items: center;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: -1; 
        */
        position: absolute;
        left: -9999px;
        top: 0;
      }
    </style>
  </head>
  <body>
    <!-- 铭牌模板 -->
    <div id="hidden-template">
      <div class="nameplate-vertical">
        <div class="brand-v">
          <div class="brand-t">XWY</div>
          <div class="brand-m">通信基站热管理装置</div>
        </div>
        <div class="spec-v">
          <div>
            <span class="spec-label">型号:</span>
            <span class="spec-value">XWY-JW-AB20-F</span>
          </div>
          <div>
            <span class="spec-label">制冷量:</span>
            <span class="spec-value">4500W</span>
          </div>
          <div>
            <span class="spec-label">制冷功率:</span>
            <span class="spec-value">1200W</span>
          </div>
          <div>
            <span class="spec-label">制冷剂:</span>
            <span class="spec-value">1200W</span>
          </div>
          <div>
            <span class="spec-label">额定电压:</span>
            <span class="spec-value"> 220V~ 50Hz </span>
          </div>
          <div>
            <span class="spec-label">生产日期:</span>
            <span class="spec-value"> 2025-3 </span>
          </div>
          <div>
            <span class="spec-label">委托方:</span>
            <span class="spec-value"> 新网元通信技术有限公司 </span>
          </div>
          <div>
            <span class="spec-label">地址:</span>
            <span class="spec-value">
              河南省郑州市金水区经三北路32号财富广场5号楼
            </span>
          </div>
          <div>
            <span class="spec-label">电话:</span>
            <span class="spec-value">0371-60976869</span>
          </div>
          <div>
            <span class="spec-label">受委托方:</span>
            <span class="spec-value"> XXX </span>
          </div>
          <div>
            <span class="spec-label">地址:</span>
            <span class="spec-value"> XXX </span>
          </div>
          <div>
            <span class="spec-label">电话:</span>
            <span class="spec-value"> XXX </span>
          </div>
        </div>
      </div>
    </div>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
      // html2canvas 示例代码
      html2canvas(document.querySelector(".nameplate-vertical"), {
        scale: 1.2, // 提高分辨率
        // 设置宽度
        width: document.querySelector(".nameplate-vertical").offsetWidth + 4,
        // 设置高度
        height: document.querySelector(".nameplate-vertical").offsetHeight + 4,
        // 设置偏移，避免边框被裁剪
        x: -2,
        y: -2,
        // 考虑滚动位置
        scrollX: 0,
        scrollY: window.scrollY,
        
        backgroundColor: null, // 保持透明背景
      }).then((canvas) => {
        // 转成图片
        const img = document.createElement("img");
        img.src = canvas.toDataURL("image/png");
        img.alt = "铭牌";
        img.title = "点击保存图片";
        document.body.appendChild(img);

        // 点击图片即可下载
        img.addEventListener("click", () => {
          const link = document.createElement("a");
          link.download = "铭牌.png";
          link.href = img.src;
          link.click();
        });
      });
    </script>
  </body>
</html>

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

图片模糊

html2canvas(document.querySelector("#capture"),{
    scale: 2, // 处理图片模糊问题
}).then(function(canvas) {
    document.body.appendChild(canvas);
});

工具类 ​

表格转图片 ​

工具类

表格转图片