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创建项目
|
2、安装 ActivereportsJS npm 包
可通过安装@grapecity/activereports-vue npm 包来安装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实例下载