實現原理：
將頁面需要生成圖片內容截圖，然后賦值給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>
