Print.js终极指南：3步搞定网页打印的完整解决方案

Print.js终极指南：3步搞定网页打印的完整解决方案

【免费下载链接】Print.jsA tiny javascript library to help printing from the web.项目地址: https://gitcode.com/gh_mirrors/pr/Print.js

Print.js是一个轻量级的JavaScript库，专门用于简化网页打印功能，支持PDF、HTML、JSON和图片等多种格式的打印需求。无论您需要打印网页内容、数据报表还是图片文档，Print.js都能提供简单易用的解决方案。

🚀 传统网页打印的痛点与Print.js的解决方案

在传统网页开发中，实现打印功能常常会遇到各种问题：打印样式难以控制、跨浏览器兼容性差、复杂内容打印效果不佳等。Print.js正是为解决这些问题而生的。

传统打印痛点：

• 浏览器默认打印样式不美观
• 无法控制打印页面的布局
• 复杂内容（如图片、表格）打印效果差
• 跨浏览器兼容性问题
• 代码实现复杂，维护困难

Print.js通过简单的API调用，让您能够：

• 轻松打印PDF文档
• 打印指定的HTML元素
• 将JSON数据转换为美观的表格打印
• 高质量打印图片
• 完全控制打印样式和布局

📦 快速开始：3分钟完成集成

安装Print.js

通过npm安装是最简单的方式：

npm install print-js --save

或者使用CDN直接引入：

<script src="https://cdn.jsdelivr.net/npm/print-js@1.6.0/dist/print.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/print-js@1.6.0/dist/print.min.css">

基础使用示例

// 导入Print.js import printJS from 'print-js' // 打印PDF文件 printJS('docs/invoice.pdf', 'pdf') // 打印HTML元素 printJS('invoice-content', 'html') // 打印JSON数据 const data = [ { name: '张三', email: 'zhangsan@example.com', phone: '13800138000' }, { name: '李四', email: 'lisi@example.com', phone: '13900139000' } ] printJS({ printable: data, type: 'json', properties: ['name', 'email', 'phone'], header: '员工通讯录' })

🖨️ 核心功能详解

1. PDF文件打印

Print.js支持打印本地和远程的PDF文件，无需复杂的配置：

// 打印远程PDF printJS('https://example.com/documents/report.pdf', 'pdf') // 打印本地PDF printJS('/documents/invoice.pdf', 'pdf') // 使用Base64编码的PDF printJS({ printable: pdfBase64String, type: 'pdf', base64: true })

2. HTML内容打印

打印网页中的特定元素，保持原有的样式和布局：

// 打印指定ID的元素 printJS('invoice-container', 'html') // 自定义打印样式 printJS({ printable: 'content-area', type: 'html', style: '@page { margin: 20mm } .no-print { display: none }' }) // 添加页眉页脚 printJS({ printable: 'report-content', type: 'html', header: '月度报告', footer: '第 {page} 页 / 共 {totalPages} 页' })

3. JSON数据表格打印

将JSON数据自动转换为美观的表格进行打印，非常适合数据报表：

const salesData = [ { product: '产品A', quantity: 150, price: 299, total: 44850 }, { product: '产品B', quantity: 89, price: 599, total: 53311 }, { product: '产品B', quantity: 210, price: 199, total: 41790 } ] printJS({ printable: salesData, type: 'json', properties: [ { field: 'product', displayName: '产品名称' }, { field: 'quantity', displayName: '数量' }, { field: 'price', displayName: '单价' }, { field: 'total', displayName: '总计' } ], header: '销售报表', gridStyle: 'border: 1px solid #ddd;', gridHeaderStyle: 'background-color: #f8f9fa; font-weight: bold;' })

4. 图片打印

支持单张或多张图片的高质量打印：

// 打印单张图片 printJS('images/product.jpg', 'image') // 打印多张图片 printJS({ printable: [ 'images/product-1.jpg', 'images/product-2.jpg', 'images/product-3.jpg' ], type: 'image', header: '产品图片集', imageStyle: 'width:100%; margin-bottom:10px;' })

Print.js打印人物图片效果示例 - 保持原始画质和细节

🔧 高级配置与自定义

打印样式控制

Print.js提供了多种方式来控制打印样式：

// 自定义CSS样式 printJS({ printable: 'content', type: 'html', style: ` @media print { body { font-family: "Microsoft YaHei", sans-serif; } h1 { color: #333; } table { border-collapse: collapse; } .no-print { display: none; } } ` }) // 引入外部CSS文件 printJS({ printable: 'content', type: 'html', css: 'print-styles.css' })

打印回调函数

Print.js支持多种回调函数，让您更好地控制打印流程：

printJS({ printable: 'content', type: 'html', onPrintDialogClose: function() { console.log('打印对话框已关闭') // 执行清理操作 }, onError: function(error) { console.error('打印出错:', error) // 错误处理 }, onIncompatibleBrowser: function() { console.warn('浏览器不支持，已在新标签页打开') // 兼容性处理 } })

模态框显示

在打印前显示加载模态框，提升用户体验：

printJS({ printable: 'large-report.pdf', type: 'pdf', showModal: true, modalMessage: '正在准备打印...' })

💡 实际应用场景

场景一：电商订单打印

电商网站需要打印订单详情、发票和物流单：

// 打印订单详情 function printOrder(orderId) { printJS({ printable: `order-${orderId}`, type: 'html', header: `订单号: ${orderId}`, footer: '打印时间: {date}', style: '.order-details { font-size: 12pt; }' }) }

场景二：数据报表导出

企业管理系统需要导出数据报表：

// 导出销售数据报表 function exportSalesReport(data) { printJS({ printable: data, type: 'json', properties: ['date', 'product', 'quantity', 'amount'], header: '销售数据报表', documentTitle: '销售报表_' + new Date().toLocaleDateString(), gridStyle: 'border: 1px solid #ccc;', gridHeaderStyle: 'background-color: #f0f0f0;' }) }

场景三：图片文档打印

内容管理系统需要打印带图片的文章：

// 打印带图片的文章 function printArticle(articleId) { printJS({ printable: `article-${articleId}`, type: 'html', scanStyles: true, targetStyles: ['*'], style: '@page { size: A4; margin: 20mm }' }) }

Print.js打印运动装备效果示例 - 高对比度图片也能完美呈现

🛠️ 开发与测试

开发环境搭建

如果您想为Print.js贡献代码或进行二次开发：

# 克隆仓库 git clone https://gitcode.com/gh_mirrors/pr/Print.js.git # 安装依赖 cd Print.js npm install # 启动开发服务器 npm run watch # 运行测试 npm run test # 手动测试 npm start

项目结构

Print.js的项目结构清晰，便于理解和维护：

• 核心源码目录：src/js/
• 样式文件目录：src/sass/
• 测试用例目录：test/unit/
• 手动测试目录：test/manual/

✅ 最佳实践建议

1. 优化打印样式

/* print-styles.css */ @media print { body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } /* 隐藏不需要打印的元素 */ .no-print, .navigation, .sidebar, .footer { display: none !important; } /* 优化链接显示 */ a { color: #000; text-decoration: none; } a[href]:after { content: " (" attr(href) ")"; font-size: 90%; } }

2. 处理移动端打印

// 移动端适配 function printOnMobile(content) { const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) if (isMobile) { // 移动端使用更简单的样式 printJS({ printable: content, type: 'html', style: '@page { margin: 10mm } body { font-size: 14pt; }' }) } else { // 桌面端使用完整样式 printJS(content, 'html') } }

3. 批量打印优化

// 批量打印优化 async function batchPrint(documents) { for (const doc of documents) { await new Promise(resolve => { printJS({ printable: doc.url, type: doc.type, onPrintDialogClose: resolve }) }) // 添加延迟，避免浏览器限制 await new Promise(resolve => setTimeout(resolve, 1000)) } }

❓ 常见问题解答

Q: Print.js支持哪些浏览器？

A: Print.js支持所有现代浏览器，包括Chrome、Firefox、Safari、Edge等。对于不兼容的浏览器，Print.js会自动降级处理。

Q: 如何打印隐藏的元素？

A: 使用Print.js时，元素不需要事先显示。Print.js会自动处理元素的显示和隐藏，打印完成后会恢复原状。

Q: 可以打印动态生成的内容吗？

A: 当然可以！Print.js支持打印任何DOM元素，包括动态生成的内容。只需确保在调用printJS时，元素已经存在于DOM中。

Q: 如何自定义打印页面的尺寸？

A: 可以通过CSS的@page规则自定义页面尺寸：

@page { size: A4 landscape; margin: 20mm; }

Q: Print.js有性能问题吗？

A: Print.js非常轻量，压缩后只有几KB。对于大量数据的打印，建议分批处理或使用服务器端渲染。

🎯 总结

Print.js是一个功能强大且易于使用的网页打印解决方案。无论您需要打印简单的HTML内容、复杂的PDF文档、结构化的JSON数据还是高质量的图片，Print.js都能提供完美的支持。

主要优势：

• ✅ 轻量级，不增加页面负担
• ✅ 支持多种格式（PDF、HTML、JSON、图片）
• ✅ 完全控制打印样式
• ✅ 优秀的跨浏览器兼容性
• ✅ 简单的API设计，易于集成

通过本文的介绍，您应该已经掌握了Print.js的核心功能和最佳实践。现在就开始使用Print.js，让您的网页打印功能变得更加简单和强大吧！

【免费下载链接】Print.jsA tiny javascript library to help printing from the web.项目地址: https://gitcode.com/gh_mirrors/pr/Print.js