JavaScript无法直接调用打印机或生成PDF,但可通过window.print()实现网页打印、html2canvas+jsPDF前端导出PDF、Puppeteer服务端生成高质量PDF等方案,需依需求选择合适技术路径。

JavaScript本身不能直接调用打印机或生成PDF文件,但可以通过浏览器原生API和第三方库实现打印页面内容、导出为PDF等常用功能。关键在于区分“网页打印”和“生成PDF”两种不同需求,选择合适的技术路径。
使用window.print()实现网页打印
这是最轻量、兼容性最好的方式,适合打印当前页面或指定区域内容。它调用浏览器的打印对话框,用户可选择打印机、页边距、是否打印背景色等。
- 直接调用
window.print()会打印整个页面;如需只打印部分内容,建议用CSS媒体查询(@media print)隐藏非打印元素 - 可在打印前动态添加样式:例如给要打印的区域加一个
print-section类,然后在CSS中写@media print { body * { visibility: hidden; } .print-section { visibility: visible; position: absolute; top: 0; left: 0; } } - 注意:部分浏览器(如Chrome)默认不打印背景图和颜色,需在打印设置中勾选“背景图形”才能显示
用html2canvas + jsPDF生成PDF文档
适用于需要将网页某块区域(如报表、图表、表单)导出为PDF并下载的场景。原理是先用html2canvas截取DOM为图片,再用jsPDF把图片插入PDF。
- 引入两个库:
html2canvas@2.4.1和jspdf@2.5.1(推荐使用ES模块方式导入) - 基本流程:获取目标元素 → 调用
html2canvas(el)生成canvas → 用jsPDF新建文档 → 调用addImage()插入canvas的dataURL → 调用save("report.pdf") - 注意字体问题:html2canvas对CSS自定义字体支持有限,建议使用系统安全字体(如
font-family: "Helvetica", "Arial", sans-serif),或提前加载Web Font并等待document.fonts.ready后再截图
用Puppeteer在服务端生成高质量PDF(Node.js环境)
若需服务端渲染、精确排版、分页控制或处理大量PDF生成任务,推荐用Puppeteer。它基于Chromium,能真实渲染HTML/CSS/JS,生成的PDF质量高、一致性好。
立即学习“Java免费学习笔记(深入)”;
- 安装:
npm install puppeteer,启动浏览器实例后用page.goto()加载HTML或本地文件 - 核心方法:
page.pdf({ format: 'A4', printBackground: true, margin: { top: '20px' } }),支持分页符() - 适合场景:后台导出订单PDF、生成发票、批量生成报告等;不适合纯前端浏览器环境(因需Node.js运行时)
其他实用方案与注意事项
根据项目规模和需求复杂度,还可考虑更专业的工具:
-
Client-side PDF生成进阶:用
pdfmake可编程构建PDF结构(表格、列表、样式),无需截图,体积小、性能好,适合内容结构化强的场景(如合同、清单) -
CSS打印优化技巧:使用
@page规则设置纸张大小、方向;用break-before/break-after控制分页;避免使用position: fixed元素(打印时可能错位) -
移动端兼容提醒:iOS Safari对
window.print()支持较弱,部分机型无响应;生成PDF的方案在移动端通常更可靠











