如何通过JavaScript 函数实现生成PDF 文件

Posted 2021-09-10 LanLan_Guo

前端往往需要将已有的数据展示结果，导出成PDF 文件， 支持将设计好的报表另存为 PDF, XLSX 及 html 文件。也可以不预览直接将报表导出。

在纯 javascript 应用中增加导出功能
需要将报表文件导出为哪种格式，就需要引入相关的js文件，如下：

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>

如果需要在运行时设置一些导出属性，可以参考 导出 API 导出代码如下：

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];

ActiveReports.Viewer 的构造函数中第二个参数接受 ViewerOptions 对象 可以设置 ExportsSettings 属性。 您可以用来为每种支持的导出格式预设设置的默认值。

无预览直接导出
ActiveReportsJS 在PdfExport, HtmlExport XlsxExport 提供了 exportDocument 方法 ，以下代码演示了从报表加载，到运行，再到导出，下载导出文件：

import { Core, PdfExport } from "@grapecity/activereports";

const pdfExportSettings: PdfExport.PdfSettings = {
  title: "Test document",
  author: "GrapeCity",
  keywords: "export, report",
  subject: "Report",
  pdfVersion: "1.4",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await PdfExport.exportDocument(doc, pdfExportSettings);
result.download("exportedreport.pdf");