效果演示
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom2pdf</title>
<script src="lib/html2pdf.bundle.min.js"></script>
</head>
<body>
<div>
<table id="table" border="1">
<tr>
<th>姓名</th>
<td>小女孩</td>
</tr>
<tr>
<th>爱好</th>
<td>吃棒棒糖</td>
</tr>
<tr>
<th>照片</th>
<td>
<img alt="photo.png" src="images/photo.jpg" style="display: block;width: 160px">
</td>
</tr>
</table>
</div>
<div style="height: 10px"></div>
<div>
<button id="btn-translate">转换</button>
</div>
<script>
document.querySelector("#btn-translate").onclick = function () {
let table = document.querySelector("#table");
let box = table.getBoundingClientRect();
html2pdf().from(document.querySelector("#table")).set({
filename: "info.pdf",
html2canvas: {width: box.width, height: box.height}
}).save();
}
</script>
</body>
</html>