2024web打印解决方案 [hot]背景最近在做公司后管系统的打印工具,翻了很多资料这里针对个人封装的，以及现有的一

背景

最近在做公司后管系统的打印工具,翻了很多资料这里针对个人封装的，以及现有的一些方案对比，总结一下。

1. 浏览器打印

通过 window.print()调用浏览器打印

优点:

比较简单
可以直接选择打印机打印

缺点：

不同浏览器中存在区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox和 IE 没有预览而是直接让你选择打印机
打印的是整个网页，不能局部打印
打印不支持自定义分页行为，默认不支持批量打印
打印的时候样式有问题，所见非所得
打印的单位往往是绝对单位

2. iFrame

通过创建iFrame加载dom字符串 + iframe.webcontent.print进行打印

代码如:

export function printByDom (el:HTMLElement, custStyle = '') {

  const iframe = document.createElement('iframe');
  iframe.style.position = 'fixed';
  iframe.style.zIndex = '-99';
  document.body.appendChild(iframe);
  const iframeDoc = iframe.contentWindow!.document;
  const node = el.cloneNode(true);

  iframeDoc.body.appendChild(node);
  const style = document.createElement('style');
  style.media = 'print';
  style.innerText = `
    @page{
      size:auto;
      margin:0mm;
    }
    table{
      width:100%;
      border:1px solid;
      border-collpase:collapse;
    }
    table td,table th{
      border:1px solid;
      padding:4px;
    }
    ${custStyle}
  `;
  iframeDoc.head.appendChild(style);

  (iframeDoc.body as HTMLBodyElement).onafterprint = ()=>{
    (iframeDoc.body as HTMLBodyElement).onafterprint = null;
    document.body.removeChild(iframe);
  };
  setTimeout(() => {
    iframe.contentWindow!.print();
  });
}

优点：

解决局部打印问题

缺点：

写元素和样式很麻烦
不支持静默打印
对于checkbox radio等需要手动处理

3. vue-print-nb 等打印库

通过真实dom + v-print 指令进行打印

优点：

解决了window.print 的局部打印问题
有很多配置项如页眉等
解决了checkbox radio手动处理问题
解决了样式书写和元素书写问题

缺点：

内容必须挂载页面上
使用方式必须使用v-print
不支持静默打印

4. 参考vue-print-nb jQueryprint printJs 自己封装的打印函数

代码很多不全放上来了这里直接看效果

打印页面上的dom(id/class)

const printByClass = () => {
  printer('.print1')
}
const printByID = () => {
  printer('#printid')
}

打印模板

import enterTpl from '@/printTpl/entry.html?raw'
const printByhtmlTpl = () => {
  printer(enterTpl, {
    data: {
      djh: 'No1055391601',
      riqi: '2024-07-23',
      rkck: '南京市雨花台区仓库',
      ypbh: '10306014',
      ypfl: '入库111111111111'
    },
    header: '北京拓源软件系统股份有限公司',
    waterMark: '北京拓源软件系统股份有限公司'
  })
}

打印表格数据

const printDataSource = () => {
  printer({
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
      },
      {
        title: '电话号',
        dataIndex: 'telNo',
      },
      {
        title: '性别',
        dataIndex: 'sex',
      },
      {
        title: '是否独生子女',
        dataIndex: 'isAlone',
      }
    ],
    data: [
      {
        name: '张三',
        age: 30,
        address: '北京市海淀区',
        telNo: '13800138000',
        sex: '男',
        isAlone: '是'
      },
      {
        name: '李四',
        age: 25,
        address: '北京市朝阳区',
        telNo: '13800138001',
        sex: '女',
        isAlone: '否'
      },
      {
        name: '王五',
        age: 35,
        address: '北京市丰台区',
        telNo: '13800138002',
        sex: '男',
        isAlone: '是'
      }
    ]
  }, {
    header: '北京拓源软件系统股份有限公司'
  })
}

打印模板并签字

const finished=(res)=>{
  // console.log(res);
  isShow.value =false
    printer(signTpl, {
    data: {
      djh: 'No1055391601',
      riqi: '2024-07-23',
      rkck: '南京市雨花台区仓库',
      ypbh: '10306014',
      ypfl: '入库111111111111',
      img: res
    },
    header: '北京拓源软件系统股份有限公司',
    waterMark: '北京拓源软件系统股份有限公司'
  })
}

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窗口的配置百分百不弹出来打印弹窗直接使用打印机打印,我采用的就是这个方案,不分代码如下

const handlePrint = (e, { htmlText }) => {
  // 创建一个新的隐藏窗口，用于打印
  let printWindow = new BrowserWindow({
    show: false, width: 1920, height: 1080, contextIsolation: false,
    enableRemoteModule: true, nodeIntegration: true, webSecurity: false,
    webPreferences: {
      defaultEncoding: 'utf-8'
    }
  })
  console.log("------- 正在打印 --------");
  
  printWindow.loadURL('data:text/html,' + encodeURIComponent(htmlText))
  setTimeout(()=>{    
    printWindow.webContents.print({ 
      deviceName:(list.find((item) => item.name === active)).name,
      silent: true,
    })
  },2000)
}

客户端ui如下

方案2 使用 webContents.printToPdf

这个也是electronApi 实现起来不难有想尝试的可以尝试一下

方案3 使用ffi-napi模块调用C++编写的动态链接库

这里需要有c++的能力,手动调用系统级的打印api去打印

方案4 也可以html转pdf 再使用printToPdf

结尾

这是我研究了两周总结的打印方案,如果对您有所启发请不要吝啬免费的点赞,您的支持将是我前进的动力。