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

前端,报表,如何,实现,预览,打印,解决方案,静默 · 浏览次数 : 581

小编点评

## 前端打印的挑战：浏览器的打印预览页面，影响打印效果本文介绍了一种实现无预览打印的方案，旨在解决前端打印过程中浏览器的打印预览页面对打印效果的影响。 **前端打印的挑战：** * 由于前端打印需要强依赖浏览器的打印预览页面，每一次打印都需要弹出来打印预览对话框，手动点击关闭多个按钮，才能实现批量打印，甚至一次性打印几百张上千张的报表，就会变成“NightMare”。 * 浏览器对字体、边线等处理不同，导致打印效果差距很大，有的边线加粗，有的1页数据，打印出来呈现2页，甚至 worse 的情况是多个页面混杂在一页上。 **实现思路：** 1. 后端实现一个接口，接收Blob类型PDF流，然后调用系统默认打印机，将PDF进行静默打印。 2.前端利用ActivereportsJS的PDF.exportDocument无预览导出PDF，该接口返回的result包含data属性和download方法，然后调用后端接口，将result.data传递给后端。 **具体实现步骤：** * 前端实现方法：前端利用ActivereportsJS的PDF.exportDocument无预览导出PDF，该接口返回的result包含data属性和download方法，然后调用后端接口，将result.data传递给后端。 **具体PDF.exportDocument可以参考文档：** * https://demo.grapecity.com.cn/activereportsjs/demos/api/export/purejs **具体PDF.exportDocument示例：** ```javascript 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 }) .then(function () { // 打印成功 }) .catch(function (error) { // 打印失败 }); }) .catch(function (error) { // PDF导出失败 }); ``` **总结：** 通过以上方案，前端可以实现无预览打印，用户点击打印按钮直接使用默认打印机打印出内容。该方案可用于各种场景，例如： * 需要在前端展示大量数据时，进行导出和打印。 * 需要对打印效果进行调整的场景。 * 需要切换打印机时进行调整。

正文

本文由葡萄城技术团队于博客园原创并首发
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

在前端开发中，除了将数据呈现后，我们往往需要为用户提供，打印，导出等能力，导出是为了存档或是二次分析，而打印则因为很多单据需要打印出来作为主要的单据来进行下一环节的票据支撑，而前端打印可以说是非常令人头疼的一件事。

为什么令大家头疼呢？

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

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

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