乐趣区

关于前端:前端报表如何实现无预览打印解决方案或静默打印

jiezi

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

为什么令大家头疼呢？

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

每一次打印都要弹出来打印预览对话框，如果前端须要批量打印，那么意味着客户要点击无数个敞开按钮，能力实现批量打印，如果一次性打印几百张上千张的报表，则会成为“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/…

退出移动版