htmlcanvas2实现将网页生成图片，自定义保存图片的名称
实现原理：
将页面需要生成图片内容截图，然后赋值给a标签的href，再通过a标签提供的下载功能
1.引入插件：html2canvas
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
2.使用插件
//生成图片,点击id为createImg的按钮生成图片
$("#createImg").click(function () {
html2canvas(document.querySelector(".main")).then(function (canvas) {
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document .querySelector(".saveImg") .setAttribute("href", canvas.toDataURL()) }); });//给class为saveImg的a标签添加href属性
3.此时a标签上已经有了href属性，再点击a标签就能下载
案例：
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style>
* {
box-sizing: border-box;
}
.main {
width: 720px;
margin: auto;
box-shadow: 0 0 23px #ddd6;
}
.main2 {
width: 720px;
margin: auto;
box-shadow: 0 0 23px #ddd6;
display: flex;
justify-content: space-between;
}
.main2 div a {
text-decoration: none;
color: black;
border: 1px solid #d1d6d1;
background-color: -internal-light-dark(
rgb(239, 239, 239),
rgb(59, 59, 59)
);
border-radius: 5px;
}
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers th {
padding-bottom: 12px;
text-align: center;
background-color: #d1d6d1;
color: black;
}
#customers th td {
padding: 0;
margin: 0;
}
#customers tr td {
width: 6rem;
}
#customers tr td:nth-child(4) {
background-color: #d1d6d1;
}
#customers tr td:nth-child(6) {
background-color: #d1d6d1;
}
#customers tr td:nth-child(8) {
background-color: #d1d6d1;
}
input {
width: 100%;
border: none;
font-size: 17px;
padding: 0;
margin: 0;
text-align: center;
border: 0px;
outline: none;
}
.input1 {
width: 11rem;
border: none;
font-size: 18px;
color: black;
padding: 0;
margin: 0;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
$(function () {
//增加行
$("#addRow").click(function () {
let tr = ` <tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input style="</td>
<td><input type="text" /></td>
<td><input style="</td>
<td><input type="text" /></td>
<td><input style="</td>
<td><input class="input1" type="text" /></td>
</tr>`;
$("#customers").append(tr);
});
//生成图片
$("#createImg").click(function () {
html2canvas(document.querySelector(".main")).then(function (canvas) {
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document
.querySelector(".saveImg")
.setAttribute("href", canvas.toDataURL());
alert("图片生成成功！");
});
});
});
</script>
</head>
<body>
<div class="main">
<table id="customers">
<tr>
<th rowspan="2">PLUS SIZE</th>
<th rowspan="2">US</th>
<th colspan="2">BUST</th>
<th colspan="2">WAIST</th>
<th colspan="2">HIP</th>
<th rowspan="2">BRA</th>
</tr>
<tr>
<th>CM</th>
<th>INCH</th>
<th>CM</th>
<th>INCH</th>
<th>CM</th>
<th>INCH</th>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input class="input1" type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input type="text" /></td>
<td><input style="">" type="text" /></td>
<td><input class="input1" type="text" /></td>
</tr>
</table>
</div>
<div class="main2">
<div><button id="addRow">增加行</button></div>
<div><button id="createImg">生成图片</button></div>
<div>
<a id="saveImg" class="saveImg" href="" download="downImg">下载图片</a>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」