<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jspdf</title>
<link href="./plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="./plugins/jquery/jquery-1.9.1.js"></script>
<script src="./plugins/jspdf/dist/jspdf.umd.min.js"></script>
<script src="./plugins/html2canvas.min.js"></script>
<script src="./plugins/jspdf/msyh-normal.js"></script>
<script src="./plugins/html2pdf.bundle.min.js"></script>
<script src="./plugins/jsPDF-AutoTable-master/dist/jspdf.plugin.autotable.js"></script>
<style>
body * {
font-family: "msyh";
letter-spacing: 0.01px; /*解决jspdf的英文字母间隔问题 */
}
tr {
height: 5rem;
}
</style>
</head>
<body style="width: 140mm">
<div id="myExportArea">
<div class="row m-3">
<table border="1" style="border: 1px solid black; width: 100%" class="table table-bordered" id="table1">
<tr class="text-center">
<th scope="col">中文</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
<tr>
<th scope="row">1</th>
<td style="background-color: #f5da55">Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
<div class="row m-3" id="exportArea">
<div class="col-6">
<div class="card">
<img src="./images/1.jpg" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">明天</h5>
<p class="card-text">明天，又是新的一天。</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="./images/1.jpg" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">明天</h5>
<p class="card-text">明天，又是新的一天。</p>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 3rem">
<button type="button" class="btn btn-primary mb-2" onclick="downloadPdf1('myExportArea')">jspdf downloadPdf</button>
<button type="button" class="btn btn-primary mb-2" onclick="downloadPdf3('exportArea','table1')">jspdf AutoTable downloadPdf</button>
<button type="button" class="btn btn-primary mb-2" onclick="downloadPdf2('myExportArea')">html2pdf downloadPdf</button>
<button type="button" class="btn btn-primary mb-2" onclick="exportPdf('myExportArea')">exportPdf</button>
</div>
</body>
<script>
function downloadPdf1(domId) {
// var doc = new jspdf.jsPDF("landscape", "pt", "a4"); // 170宽度
var doc = new jspdf.jsPDF("portrait", "pt", "a4"); //140宽度
doc.setFont("msyh");
//表格样式支持较好，带有表格标签的生成多个空白页 bug尚未修复
doc.html(document.getElementById(domId), {
callback: function (doc) {
var pageCount = doc.internal.getNumberOfPages();
// for (let i = pageCount; i > 1; i--) {
// doc.deletePage(i);
// }
console.log(pageCount);
doc.save("test.pdf"); //下载pdf
// window.open(doc.output("bloburl")); //预览pdf
},
});
}
function downloadPdf3(domId, domIdTable) {
// var doc = new jspdf.jsPDF("landscape", "pt", "a4"); // 170宽度
var doc = new jspdf.jsPDF("portrait", "pt", "a4"); //140宽度
doc.setFont("msyh");
//使用autotable生成表格，表格行高无法调整，部分样式不支持，不会生成多个空白页
doc.autoTable({ html: "#" + domIdTable, styles: { font: "msyh", fontStyle: "normal" }, startY: 20, useCss: true });
const beginY = doc.lastAutoTable.finalY;
doc.html(document.getElementById(domId), {
callback: function (doc) {
var pageCount = doc.internal.getNumberOfPages();
console.log(pageCount);
doc.save("test.pdf"); //下载pdf
// window.open(doc.output("bloburl")); //预览pdf
},
y: beginY + 10,
});
}
function downloadPdf2(domId) {
var element = document.getElementById(domId);
var opt = {
margin: 1,
filename: "myfile.pdf",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { dpi: 192, scale: 2, letterRendering: true },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
pagebreak: { mode: "avoid-all" },
};
html2pdf().set(opt).from(element).save();
}
function exportPdf(domId) {
html2canvas(document.getElementById(domId), { scale: 2 }).then((canvas) => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 595.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = (555.28 / contentWidth) * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jspdf.jsPDF("", "pt", "a4");
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("xxxx.pdf");
});
}
</script>
</html>
