背景
最近在做公司后管系统的打印工具,翻了很多资料这里针对个人封装的，以及现有的一些方案对比，总结一下。
1. 浏览器打印
通过 window.print()调用浏览器打印
优点:
- 比较简单
- 可以直接选择打印机打印
缺点：
- 不同浏览器中存在区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox和 IE 没有预览而是直接让你选择打印机
- 打印的是整个网页，不能局部打印
- 打印不支持自定义分页行为，默认不支持批量打印
- 打印的时候样式有问题，所见非所得
- 打印的单位往往是绝对单位
2. iFrame
通过创建iFrame加载dom字符串 + iframe.webcontent.print进行打印
代码如:
1export function printByDom (el:HTMLElement, custStyle = '') {
2
3 const iframe = document.createElement('iframe');
4 iframe.style.position = 'fixed';
5 iframe.style.zIndex = '-99';
6 document.body.appendChild(iframe);
7 const iframeDoc = iframe.contentWindow!.document;
8 const node = el.cloneNode(true);
9
10 iframeDoc.body.appendChild(node);
11 const style = document.createElement('style');
12 style.media = 'print';
13 style.innerText = `
14 @page{
15 size:auto;
16 margin:0mm;
17 }
18 table{
19 width:100%;
20 border:1px solid;
21 border-collpase:collapse;
22 }
23 table td,table th{
24 border:1px solid;
25 padding:4px;
26 }
27 ${custStyle}
28 `;
29 iframeDoc.head.appendChild(style);
30
31 (iframeDoc.body as HTMLBodyElement).onafterprint = ()=>{
32 (iframeDoc.body as HTMLBodyElement).onafterprint = null;
33 document.body.removeChild(iframe);
34 };
35 setTimeout(() => {
36 iframe.contentWindow!.print();
37 });
38}
39
优点：
- 解决局部打印问题
缺点：
- 写元素和样式很麻烦
- 不支持静默打印
- 对于checkbox radio等需要手动处理
3. vue-print-nb 等打印库
通过 真实dom + v-print 指令进行打印
优点：
- 解决了window.print 的局部打印问题
- 有很多配置项如页眉等
- 解决了checkbox radio手动处理问题
- 解决了样式书写和元素书写问题
缺点：
- 内容必须挂载页面上
- 使用方式必须使用v-print
- 不支持静默打印
4. 参考vue-print-nb jQueryprint printJs 自己封装的打印函数
代码很多不全放上来了这里直接看效果
打印页面上的dom(id/class)
1const printByClass = () => {
2 printer('.print1')
3}
4const printByID = () => {
5 printer('#printid')
6}
打印模板
1import enterTpl from '@/printTpl/entry.html?raw'
2const printByhtmlTpl = () => {
3 printer(enterTpl, {
4 data: {
5 djh: 'No1055391601',
6 riqi: '2024-07-23',
7 rkck: '南京市雨花台区仓库',
8 ypbh: '10306014',
9 ypfl: '入库111111111111'
10 },
11 header: '北京拓源软件系统股份有限公司',
12 waterMark: '北京拓源软件系统股份有限公司'
13 })
14}
打印表格数据
1const printDataSource = () => {
2 printer({
3 columns: [
4 {
5 title: '姓名',
6 dataIndex: 'name',
7 },
8 {
9 title: '年龄',
10 dataIndex: 'age',
11 },
12 {
13 title: '住址',
14 dataIndex: 'address',
15 },
16 {
17 title: '电话号',
18 dataIndex: 'telNo',
19 },
20 {
21 title: '性别',
22 dataIndex: 'sex',
23 },
24 {
25 title: '是否独生子女',
26 dataIndex: 'isAlone',
27 }
28 ],
29 data: [
30 {
31 name: '张三',
32 age: 30,
33 address: '北京市海淀区',
34 telNo: '13800138000',
35 sex: '男',
36 isAlone: '是'
37 },
38 {
39 name: '李四',
40 age: 25,
41 address: '北京市朝阳区',
42 telNo: '13800138001',
43 sex: '女',
44 isAlone: '否'
45 },
46 {
47 name: '王五',
48 age: 35,
49 address: '北京市丰台区',
50 telNo: '13800138002',
51 sex: '男',
52 isAlone: '是'
53 }
54 ]
55 }, {
56 header: '北京拓源软件系统股份有限公司'
57 })
58}
打印模板并签字
1const finished=(res)=>{
2
3 isShow.value =false
4 printer(signTpl, {
5 data: {
6 djh: 'No1055391601',
7 riqi: '2024-07-23',
8 rkck: '南京市雨花台区仓库',
9 ypbh: '10306014',
10 ypfl: '入库111111111111',
11 img: res
12 },
13 header: '北京拓源软件系统股份有限公司',
14 waterMark: '北京拓源软件系统股份有限公司'
15 })
16}
html字符串形式,这里不演示了
优点：
- 解决局部打印问题
- 优化了写打印模板的方式
- 不用挂载到页面上
- 仿照开源库对checkbox radio进行处理
- 添加了水印配置
- 添加了页眉页脚配置
- 对印章打印进行了处理
缺点：
- 不支持静默打印
- 存在一些浏览器兼容问题(由于自己项目所以没考虑很多浏览器版本)
5. 后端绘制pdf拼接数据并返回pdf
我司采用的是Jaspersoft工具绘制模板后端使用api进行数据拼接后返回pdf文件
优点：
- 绘制灵活
- 绘制也很清晰
缺点
- 需要先学习api使用(其实我觉得也不算是缺点)
6. 第三方插件
第三方插件主要解决的是静默打印方式,内部通过代码链接打印机进行打印。 如: C-lodop
我司以前采用的就是lodop
优点：
- 支持静默打印
- 打印api比较全
缺点
- 需要付费
7. 手搓静默打印客户端
第三方插件主要也是调用操作系统的api,在大前端时代我们可以使用electron快速搭建一个客户端,而且这个客户端写的nodejs代码也可以调用一些系统级的api,当然使用electron手搓也有几个方案
方案1 使用 webContents.print
这里其实也是使用了window.print函数,这里使用electron窗口的配置百分百不弹出来打印弹窗直接使用打印机打印,我采用的就是这个方案,不分代码如下
1const handlePrint = (e, { htmlText }) => {
2
3 let printWindow = new BrowserWindow({
4 show: false, width: 1920, height: 1080, contextIsolation: false,
5 enableRemoteModule: true, nodeIntegration: true, webSecurity: false,
6 webPreferences: {
7 defaultEncoding: 'utf-8'
8 }
9 })
10 console.log("------- 正在打印 --------");
11
12 printWindow.loadURL('data:text/html,' + encodeURIComponent(htmlText))
13 setTimeout(()=>{
14 printWindow.webContents.print({
15 deviceName:(list.find((item) => item.name === active)).name,
16 silent: true,
17 })
18 },2000)
19}
20
客户端ui如下
方案2 使用 webContents.printToPdf
这个也是electronApi 实现起来不难 有想尝试的可以尝试一下
方案3 使用ffi-napi模块调用C++编写的动态链接库
这里需要有c++的能力,手动调用系统级的打印api去打印
方案4 也可以html转pdf 再使用printToPdf
结尾
这是我研究了两周总结的打印方案,如果对您有所启发请不要吝啬免费的点赞,您的支持将是我前进的动力。
个人笔记记录 2021 ~ 2025