在Web应用开发中,打印功能一直是一个令人头疼的问题。传统的Web打印方案存在样式丢失、兼容性差、功能单一等诸多痛点。最近偶然发现了一个名为web-print-pdf
的npm包,在调查了几款常见的Web打印实现后,发现大多数技术方案都比较晦涩难懂,而这个包提供了纯前端的体验,让我眼前一亮。
什么是web-print-pdf?
web-print-pdf
是一个基于Electron的跨平台Web打印解决方案,专为Web应用提供强大而灵活的打印能力。它通过创新的架构设计,完美解决了Web打印的各种技术难题。
🎯 核心优势
- 🖨️ 多种打印方式:支持HTML内容、URL、Base64等多种格式
- 📄 PDF生成:将HTML转换为高质量PDF文档
- 🖼️ 图片打印:支持图片URL和Base64格式打印
- 📦 批量打印:支持批量任务处理
- 🔧 灵活配置:丰富的PDF和打印选项
- 🌐 WebSocket通信:实时连接状态监控
- 🎨 自定义样式:支持页眉页脚、边距、水印、页码等自定义设置
- ⚡ 高性能:基于WebSocket的实时通信,异步任务队列
- 🔍 预览功能:支持打印预览,所见即所得
- 🌍 足够简单,前端友好:足够简单,api一看便会
功能特性
javascript
// 首选引入npm包
import webPrintPdf from 'web-print-pdf'
1. 多格式输入支持
该包支持多种输入格式,满足不同场景的需求:
javascript
// 打印HTML内容
await webPrintPdf.printHtml({
content: '<h1>Hello World</h1>',
pdfOptions: { paperFormat: 'A4' },
printOptions: { copies: 1 }
});
// 打印网页URL
await webPrintPdf.printHtmlByUrl({
url: 'https://example.com/report',
pdfOptions: { paperFormat: 'A4' }
});
// 打印PDF文件
await webPrintPdf.printPdfByUrl({
url: 'https://example.com/document.pdf'
});
// 打印图片
await webPrintPdf.printImageByUrl({
url: 'https://example.com/image.jpg'
});
2. 强大的PDF配置选项
支持丰富的PDF生成配置,实现精确的打印效果:
javascript
const pdfOptions = {
// 纸张格式:A0、A1、A2、A3、A4、A5、A6、Letter、Legal等
paperFormat: 'A4',
// 自定义纸张尺寸
width: '210mm',
height: '297mm',
// 页边距设置
margin: {
top: '20px',
bottom: '20px',
left: '20px',
right: '20px'
},
// 横向/纵向
landscape: false,
// 打印背景
printBackground: true,
// 水印功能
watermark: {
text: "机密文件",
color: 'rgb(255,0,0)',
x: 'alignCenter',
y: 'alignCenter',
size: 30,
opacity: 0.3
},
// 页码设置
pageNumber: {
start: 1,
format: '第{{page}}页/共{{totalPage}}页',
x: 'alignCenter',
y: 'alignBottom',
color: 'rgb(0,0,0)',
size: 12
},
// 页面范围
pageRanges: [{from: 1, to: 5}, {from: 7, to: 10}]
};
3. 灵活的打印配置
支持多种打印参数,满足不同打印需求:
javascript
const printOptions = {
// 指定打印机
printerName: 'HP LaserJet Pro',
// 纸张格式
paperFormat: 'A4',
// 彩色/黑白
colorful: true,
// 横向/纵向
landscape: false,
// 打印份数
copies: 2,
// 双面打印模式
duplexMode: 'duplex', // simplex, duplex, duplexshort, duplexlong
// 缩放模式
scaleMode: 'fit', // noscale, shrink, fit
// 页码范围
pageRanges: [{from: 1, to: 3}],
// 纸盘选择
bin: 1
};
4. 高级功能特性
预览功能
支持打印预览,让用户在打印前查看效果:
javascript
const extraOptions = {
action: 'preview', // 预览模式
requestTimeout: 15
};
// 返回预览URL,用户可以在浏览器中查看
const result = await webPrintPdf.printHtml({
content: htmlContent,
pdfOptions,
printOptions,
extraOptions
});
// 打开预览页面
window.open(result.printPreviewUrl);
自定义主题
支持自定义应用标题和主题色:
javascript
// 设置应用标题
await webPrintPdf.utils.setTitle("我的打印应用");
// 设置主题色
await webPrintPdf.utils.setThemeColor('rgb(229,182,80)');
网络请求配置
支持Cookie、请求头等网络配置:
javascript
const extraOptions = {
// 网络超时
requestTimeout: 15,
// Cookie设置
cookies: {
sessionId: 'abc123',
token: 'xyz789'
},
// 请求头设置
httpHeaders: {
'Authorization': 'Bearer token123',
'User-Agent': 'Custom Agent'
},
// 本地存储
localStorages: {
theme: 'dark',
language: 'zh-CN'
}
};
使用场景
1. 企业报表打印
javascript
// 打印财务报表
await webPrintPdf.printHtmlByUrl({
url: 'https://company.com/financial-report',
pdfOptions: {
paperFormat: 'A4',
watermark: { text: "机密文件", opacity: 0.3 },
pageNumber: { format: '第{{page}}页/共{{totalPage}}页' }
},
printOptions: {
duplexMode: 'duplex',
copies: 3
}
});
2. 电商订单打印
javascript
// 打印订单详情
await webPrintPdf.printHtml({
content: orderHtmlTemplate,
pdfOptions: {
paperFormat: 'A5',
margin: { top: '10mm', bottom: '10mm', left: '10mm', right: '10mm' }
},
printOptions: {
copies: 2,
scaleMode: 'fit'
}
});
3. 文档批量打印
javascript
// 批量打印多个文档
const documents = [
'https://example.com/doc1.pdf',
'https://example.com/doc2.pdf',
'https://example.com/doc3.pdf'
];
for (const doc of documents) {
await webPrintPdf.printPdfByUrl({
url: doc,
printOptions: { copies: 1 }
});
}
技术优势
1. 多格式支持与高质量输出
- 支持HTML、URL、Base64、图片等多种输入格式
- 高质量PDF生成,完美还原Web页面样式
- 支持CSS3所有特性,保持字体和颜色一致性
2. 批量处理与高性能
- 支持批量任务处理,提高工作效率
- WebSocket实时通信,异步任务队列
- 内存优化管理,稳定可靠
3. 丰富的自定义功能
- 支持页眉页脚、边距、水印、页码等自定义设置
- 灵活的打印参数配置
- 实时连接状态监控
4. 平台兼容与开发者友好
- Windows全平台支持
- 自动适配系统打印服务
- 简单易用的API,完善的错误处理
- 支持打印预览,所见即所得
快速开始
1. 环境准备
确保已安装Node.js环境,并下载相应的打印客户端。
2. 安装npm包
bash
npm install web-print-pdf
3. 基础使用
javascript
import { webPrintPdf } from 'web-print-pdf';
// 简单打印
await webPrintPdf.printHtml({
content: '<h1>Hello World</h1>',
pdfOptions: { paperFormat: 'A4' },
printOptions: { copies: 1 }
});
总结
通过对比市面上几款常见的Web打印解决方案,我发现大多数技术实现都比较复杂,学习成本较高。而web-print-pdf
这个包通过创新的技术架构和丰富的功能特性,为Web应用提供了完整的打印解决方案。
核心价值
- 简单易用:API设计简洁,学习成本低
- 功能强大:支持多种格式和丰富的配置选项
- 性能优异:基于WebSocket的高效通信
- 跨平台:支持主流操作系统
- 可扩展:模块化设计,易于集成
这个技术方案值得推荐给有Web打印需求的开发者!