前端数据报表打印计划

背景

我的项目：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.innerHtmlconst 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"    }, ];// 代码非残缺代码，【伪代码】，代码大抵行为：通过数据创立tableconst 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 elementiframe.contentWindow.document.body.innerHtml = table.innerHtml;// 调用打印iframe.contentWindow.print()

第三方插件

不过理论我的项目中没必要这样难为本人去实现，有一个很残缺的框架能够实现以上的能力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/