前端数据报表打印方案

前端数据报表打印方案

背景

项目:vue + element ui

需求:web端连接打印机打印报表功能

关键词:浏览器端 连接打印机 打印报表

调研

首先,前端调用打印只有两种方式,使用window.print()和调用网络打印机。

window.print

这个是浏览器开放的api一般快捷键ctrl+p或右键都也能调用。

可以通过媒体查询的方案进行局部打印,也就是隐藏其他的元素只展示需要打印的区域。

调用网络打印机

这个方式其实就是调用接口传递参数,一般可以配合html2canvas

方案

由于网络打印机方案还需要后端or打印机支持,不适用这里。

方案一:通过CSS媒体查询进行区域打印

  1. 添加一个全局的媒体查询的样式
@media print {
  .no-print {
    display: none!important;
  }
}
  1. 将样式绑定不需要打印的元素上
<div class="no-print"></div>
  1. 改动需要打印区域的大小,宽度一般为980px,宽度过多会导致溢出。
printElement.style.width = "980px"

优缺点

优势:改动难度小。

缺点:涉及位置多,而且这种行为太了,不优雅。

方案二:将元素append到iframe进行渲染打印

通过获取到需要打印的元素,然后通过innerHtml获取元素,然后将html字符串写入到iframe,然后把需要的样式全部写入。

const printId = 'print-element-id';
const printElement = document.querySelector(printId)
const printElementHtml = printElement.innerHtml

const iframe = document.createElement('iframe')
iframe.setAttribute('style', '你的样式,可以从css文件下载')
document.appendChild(iframe)
iframe.contentWindow.document.body.innerHtml = printElementHtml;
// 调用打印
iframe.contentWindow.print()

优缺点

改动不大,可以针对性处理。

但样式容易出问题,需要调整,有些依赖js自适应宽度的可能出现打印不完整的问题。

方案三:通过在iframe中直接构建TABLE进行渲染

个人推荐方案

由于目标是打印报表,所以可以聚焦报表,没必要纠结是不是和网页一致,只要能按table打印就达到了目的。

当然如果产品需要保持一致,那看看能不能好好沟通,不能就选择上面的方案。

核心就是结合方案二,使用自定义table简化样式,达到打印完整的目的。

const data = [
    {
      "name": "马磊",
      "email": "o.biayajolg@xkic.pe",
      "id": "EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4",
      "age": 18,
      "phone": "19864717125",
      "address": "场历当式使民党标对确并线却。",
      "user": "75FD6371-4c3D-ED90-DD15-F0EA6fD7b942",
      "create_at": "2005-08-25 PM 18:35:14",
      "update_at": "1983-12-28 AM 00:47:25"
    },
    {
      "name": "程刚",
      "email": "m.rvvvzvojp@ofrozu.hn",
      "id": "912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b",
      "age": 97,
      "phone": "19838636737",
      "address": "办约拉则三称斯也包报素万制老。",
      "user": "94754927-94cf-a7e5-aBe7-3A23112BC8f5",
      "create_at": "1988-08-04 PM 17:26:51",
      "update_at": "2008-05-26 AM 08:33:42"
    },
 ];
// 代码非完整代码,【伪代码】,代码大致行为:通过数据创建table
const table = document.createElement('table')
data.forEach(item=>{
  const tr = document.createElement('tr')
  table.appendChild(tr);
  Object.keys(item).forEach(item => {
    const td = document.createElement('td')
      tr.appendChild(td)
  });
});

const iframe = document.createElement('iframe')
iframe.setAttribute('style', '你的样式,可以从css文件下载')
document.appendChild(iframe)
// 这里改成table的html代码,当然可以考虑改为自己 appendChild element
iframe.contentWindow.document.body.innerHtml = table.innerHtml;
// 调用打印
iframe.contentWindow.print()

image20220901192924519.png

第三方插件

不过实际项目中没必要这样难为自己去实现,有一个很完整的框架可以完成以上的能力print-js

调用也很简单:

printJS({
  documentTitle: '测试',
  header: '表格标题',
  type: 'json',
  properties: [
    { field: 'id', displayName: '编号' },
    { field: 'name', displayName: '名称' },
    { field: 'age', displayName: '年龄' },
    { field: 'phone', displayName: '手机号' },
    { field: 'address', displayName: '地址' },
    { field: 'email', displayName: '邮箱' },
    { field: 'address', displayName: '地址' },
    { field: 'user', displayName: '用户编号' },
    { field: 'create_at', displayName: '创建时间' },
    { field: 'update_at', displayName: '更新时间' },
  ],
  printable: [
    {
      "name": "马磊",
      "email": "o.biayajolg@xkic.pe",
      "id": "EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4",
      "age": 18,
      "phone": "19864717125",
      "address": "场历当式使民党标对确并线却。",
      "user": "75FD6371-4c3D-ED90-DD15-F0EA6fD7b942",
      "create_at": "2005-08-25 PM 18:35:14",
      "update_at": "1983-12-28 AM 00:47:25"
    },
    {
      "name": "程刚",
      "email": "m.rvvvzvojp@ofrozu.hn",
      "id": "912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b",
      "age": 97,
      "phone": "19838636737",
      "address": "办约拉则三称斯也包报素万制老。",
      "user": "94754927-94cf-a7e5-aBe7-3A23112BC8f5",
      "create_at": "1988-08-04 PM 17:26:51",
      "update_at": "2008-05-26 AM 08:33:42"
    },
  ],
})

小尾巴

我的博客:https://www.notbucai.com/