在前端开发中，除了将数据出现后，咱们往往须要为用户提供，打印，导出等能力，导出是为了存档或是二次剖析，而打印则因为很多单据须要打印进去作为次要的单据来进行下一环节的票据撑持， 而前端打印能够说是十分令人头疼的一件事。

为什么令大家头疼呢？

因为前端打印，要强依赖与浏览器的打印预览页面，会人造存在以下弊病：

每一次打印都要弹出来打印预览对话框，如果前端须要批量打印，那么意味着客户要点击无数个敞开按钮，能力实现批量打印，如果一次性打印几百张上千张的报表，则会成为“NightMare”。
前端打印强依赖于浏览器，支流的思路是先将内容转换为PDF文件，再调用浏览器的打印性能进行打印，而生成PDF文件是依赖于浏览器对于字体，边线等的解决，因而浏览器的异同则间接导致打印进去的成果差距很大，有的边线加粗，有的1页数据，打印进去出现2页，也是让开发者非常苦恼的事件，对于一些打印要求比拟高的行业，这就是劫难。

因而如何在前端实现无预览打印，也就是用户点击打印之后间接就应用默认打印机打印进去。针对这个需要，咱们验证了一个解决该问题的计划，本贴就来介绍该计划如何实现。

实现思路如下：
后端实现一个接口，接管Blob类型PDF流，而后调用零碎默认打印机，将PDF进行静默打印。

前端利用ACTIVEREPORTSJS自带的导出PDF，导出Blob类型，而后通过POST申请调用后端接口将Blob流传给后端进行打印。

具体实现步骤：
前端实现办法：
前端利用ActivereportsJS的PDF.exportDocument无预览导出PDF，该接口返回的result蕴含data属性和download办法，而后调用后端接口，将result.data传递给后端。

function printPDF() {    var ACTIVEREPORTSJS = GC.ActiveReports.Core;    var PDF = GC.ActiveReports.PdfExport;    var settings = {      info: {        title: "test",        author: "GrapeCity inc.",      },      pdfVersion: "1.7",    };    var pageReport = new ACTIVEREPORTSJS.PageReport();    pageReport      .load("1.rdlx-json")      .then(function () {        return pageReport.run();      })      .then(function (pageDocument) {        return PDF.exportDocument(pageDocument, settings);      })      .then(function (result) {        let formData = new FormData();        formData.append("file", result.data);        fetch("http://localhost:8088/print", {            method: 'POST',            mode: 'cors',            body: formData        })      });  }

具体PDF.exportDocument能够参考文档：
https://demo.grapecity.com.cn...

后端实现形式：
我这边是采纳python实现了一个接口，接管前端传递的Blob文件流，而后调用后端部署的服务器默认打印机间接进行静默打印。

后端程序能够部署到服务器上，如果是windows服务器，能够间接下载exe，在服务器上运行。

  • 下载链接: https://pan.baidu.com/s/1De2V... 提取码: 569c

下载下来是2个exe程序，须要放在同一个文件夹，而后运行PrintAgent.exe，切记这两个程序须要放在同一个文件夹。

留神：如果exe只给服务器上部署，那么前端在打印时调用服务器地址接口打印，最终都会从服务器上连贯的打印机打进去。
如果exe给客户端部署了，那么前端打印就能够代码调用localhost地址去打印，最终就会从客户端所连贯的默认打印机打印进去；
切换打印机的话，就调整windows的默认打印机就能够。

Linux服务器的话须要将源码拷贝到服务器去运行。

源码如下，也能够依据本人须要进行调整和批改：

https://gcdn.grapecity.com.cn...

另附 前端100张数据可视化大屏模板，按需取用：

https://www.grapecity.com.cn/...