17370845950

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质量高、一致性好。

• 安装：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的方案在移动端通常更可靠