大家好，我是第八哥。在前端开发中，我们经常会遇到这样的需求：把网页内容导出为PDF。无论是发票、报告还是用户导出的数据文件，前端生成PDF早已是刚需。而在众多解决方案中，html2pdf.js 绝对是我最常用、也最推荐的一款。
今天我就结合实战经验，带大家系统了解 html2pdf.js 的使用与配置技巧，从安装到性能优化，带你一步到位掌握。
一、html2pdf.js是什么？
html2pdf.js 是一个基于 html2canvas 和 jsPDF 封装的库，它能让我们轻松将网页内容直接转成PDF文件，支持各种布局、样式和分页。
通俗来说，就是前端“截图+打印”的升级版。相比直接截图，它能保留清晰的文字和矢量元素。
二、快速上手：安装与基础用法
你可以通过NPM安装，也可以用CDN直接引入。
npm install html2pdf.js
// 或者
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>然后几行代码就能导出PDF：
const element = document.getElementById('content');
html2pdf().from(element).save();是不是很简单？但要想导出的PDF美观、性能高，还得了解配置细节。
三、html2pdf.js常用配置详解
它其实是一个“链式调用”的API，你可以通过配置项自定义导出效果：
const opt = {
margin: 0.5,
filename: 'report.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();关键配置说明：
- • margin： 设置页边距，单位可为英寸(in)或毫米(mm)。
- • filename： 生成的PDF文件名。
- • image： 控制图片格式和质量。
- • html2canvas： 用于控制渲染清晰度，
scale越高越清晰。 - • jsPDF： 定义纸张大小和方向（portrait竖版、landscape横版）。
四、分页与长页面导出技巧
html2pdf.js 会自动分页，但有时分页位置不理想，比如文字被截断。这时可以用CSS手动控制分页。
.pdf-page-break {
page-break-before: always;
}然后在HTML中插入：
<div class="pdf-page-break"></div>这样就能灵活地控制分页位置。
五、进阶技巧：导出高分辨率PDF
默认导出可能会模糊，尤其是图表和小字体。解决办法是提高html2canvas.scale。
html2pdf().set({ html2canvas: { scale: 3 } }).from(element).save();但注意：scale太高会导致内存占用大、渲染慢。一般设置为2~3之间最合适。
六、保存前预览与异步操作
有时我们希望先预览PDF，而不是直接下载：
html2pdf().from(element).toPdf().get('pdf')
.then(function (pdf) {
window.open(pdf.output('bloburl'));
});这样可以在新窗口预览，用户确认后再保存，提升交互体验。
七、性能优化实战经验
在实际项目中，我总结出几条优化技巧：
- • 尽量减少页面中的阴影、渐变等复杂CSS。
- • 导出前临时隐藏不必要的元素（如动画、视频）。
- • 必要时将HTML拆分为多个小块分步渲染。
此外，异步加载图片时可启用useCORS: true，避免跨域图片导出失败。
八、html2pdf.js的优缺点分析
优点：
- • 纯前端实现，无需后端支持。
- • 可保留文字、表格结构，不是简单截图。
- • 配置灵活，可适配多种业务场景。
缺点：
- • 复杂页面（如SVG或动画）导出速度慢。
- • 分页控制仍需人工微调。
- • 大尺寸页面易出现内存占用高的问题。
九、实战案例：导出发票PDF
<div id="invoice">
<h2>订单发票</h2>
<p>客户：张三</p>
<p>金额：¥ 520.00</p>
</div>
<button id="export">导出PDF</button>
<script>
document.getElementById('export').addEventListener('click', () => {
const invoice = document.getElementById('invoice');
html2pdf().set({ filename: 'invoice.pdf' }).from(invoice).save();
});
</script>这样一个完整的发票PDF导出功能几分钟就能搞定。
十、总结
对于前端PDF导出需求，html2pdf.js 几乎是“即插即用”的最佳方案。掌握配置项、分页技巧和性能优化后，你可以轻松应对各种复杂导出场景。
一句话总结：html2pdf.js 是前端生成PDF的瑞士军刀，灵活、高效、强大。
评论