ActiveReportsJS 报表设计教程
页面树结构
转至元数据结尾
转至元数据起始

ActiveReportsJS Viewer 打印功能

ActiveReportJS Viewer 提供了打印 按钮 ，当报表加载完成后，可点击打印按钮进行报表打印。 除此之外，Viewer提供了打印方法API。一键打印报表

ActiveReportsJS 提供了一键打印的 API ，即在不预览报表情况下，可以直接打印，代码示例:

import { Core } from "@grapecity/activereports";
const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
doc.print();

也可以在导出报表为PDF 文件或者HTML 文档的时候，设置自动打印为 true。当报表导出完成后会立即进行打印。


下面我们来讲讲如何实现无预览打印实现参数过滤

1、新建一个项目，项目名称"noviewerprint"

   使用 Vue CLI创建项目

vue create noviewerprint

2、安装 ActivereportsJS npm 包

可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。 在项目的根目录下执行以下命令：

npm install @grapecity/activereports-vue @grapecity/activereports

3、打开项目中的 app.Vue 项目，进行无预览导出PDF的设置

<template>
<image id="pdf" type="application/pdf"  width="100%" height="800px" />
</template>
<script>
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";
    import { Core, PdfExport } from "@grapecity/activereports";
    import { FontStore } from "@grapecity/activereports/core";
    FontStore.registerFonts("/fonts/fontsConfig.json");
    const pdfExportSettings= {
      title: "Test document",
      author: "GrapeCity",
      keywords: "export, report",
      subject: "Report",
      pdfVersion: "1.4",
    };
    var report = new Core.PageReport();
    report.load("参数赋值.rdlx-json")

   .then(() => { 

return report.run() })

   .then((doc) => {
    PdfExport.exportDocument(doc,pdfExportSettings).then((result)=>
    {     
      //result.download("exportedreport.pdf");
      window.open(URL.createObjectURL(result.data))   
    }
    );
    });
</script>
<style>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

4、导出PDF进行参数传递的实现



<template>
<image id="pdf" type="application/pdf"  width="100%" height="800px" />
</template>
<script>
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";
    import { Core, PdfExport } from "@grapecity/activereports";
    import { FontStore } from "@grapecity/activereports/core";
    FontStore.registerFonts("/fonts/fontsConfig.json");
    const pdfExportSettings= {
      title: "Test document",
      author: "GrapeCity",
      keywords: "export, report",
      subject: "Report",
      pdfVersion: "1.4",
    };
    var report = new Core.PageReport();
    report.load("参数赋值.rdlx-json")
   .then(() => {
      report._parameters.P1.values[0] = '11';//给报表参数赋值
      return report.run() })
   .then((doc) => {
    PdfExport.exportDocument(doc,pdfExportSettings).then((result)=>
    {      
      //result.download("exportedreport.pdf"); 
      window.open(URL.createObjectURL(result.data))    
    }
    );
    });
</script>
<style>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

5、预览结果

6、demo下载

noviewerprint - 副本.rar

  • 无标签