2024web打印解决方案

#背景

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

#1. 浏览器打印

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

#优点:

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

#缺点：

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

#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();
  });
}
    

#优点：

1. 解决局部打印问题

#缺点：

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

#3. vue-print-nb 等打印库

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

#优点：

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

#缺点：

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

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

html字符串形式,这里不演示了

#优点：

1. 解决局部打印问题
2. 优化了写打印模板的方式
3. 不用挂载到页面上
4. 仿照开源库对checkbox radio进行处理
5. 添加了水印配置
6. 添加了页眉页脚配置
7. 对印章打印进行了处理

#缺点：

1. 不支持静默打印
2. 存在一些浏览器兼容问题(由于自己项目所以没考虑很多浏览器版本)

#5. 后端绘制pdf拼接数据并返回pdf

我司采用的是Jaspersoft工具绘制模板后端使用api进行数据拼接后返回pdf文件

#优点：

1. 绘制灵活
2. 绘制也很清晰

#缺点

1. 需要先学习api使用(其实我觉得也不算是缺点)

#6. 第三方插件

第三方插件主要解决的是静默打印方式,内部通过代码链接打印机进行打印。 如: C-lodop

我司以前采用的就是lodop

#优点：

1. 支持静默打印
2. 打印api比较全

#缺点

1. 需要付费

#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

#结尾

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