无预览一键打印

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 项目，进行如下设置

<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("design-report.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、预览结果

5、Demo实例下载

noviewerprint - 副本.rar

页面树结构

无预览一键打印

ActiveReportsJS Viewer 打印功能