ActiveReportsJS支持导出PDF、Excel、Html、并且还提供对应的API接口。可以根据自己的业务需求进行导出自定义
1、新建一个项目,项目名称"vue-export"
使用 Vue CLI创建项目
vue create vue-export
2、安装 ActivereportsJS npm 包
可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。 在项目的根目录下执行以下命令:
npm install @grapecity/activereports-vue @grapecity/activereports
3、打开项目中的 app.Vue 项目,进行如下设置
<template> <div class="report-btn-subgroup"> <button @click="expExcel" style="width:60px;height:25px; padding:5Px;margin-right:10px;margin-bottom:4px;">Excel</button> <button @click="expPDF" style="width:60px;height:25px; padding:5Px;" >PDF</button> <div id="viewer-host"> <JSViewer v-bind:availableExports="['pdf', 'xlsx', 'html']" v-bind:report="{ Uri: 'design-report.rdlx-json' }"></JSViewer> </div> </div> </template> <script> import { Viewer } from "@grapecity/activereports-vue"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-viewer.css"; import { XlsxExport} from '@grapecity/activereports'; import { Core, PdfExport } from "@grapecity/activereports"; import { FontStore } from "@grapecity/activereports/core"; export default { name: "App", components: { JSViewer: Viewer, }, methods: { expExcel() { var ARJS = Core; var Excel = XlsxExport; var settings = { sheetName: '快递单', pageSettings: { size: 'A4', orientation: 'portrait' } } var pageReport = new ARJS.PageReport(); pageReport.load('design-report.rdlx-json') .then(function () { return pageReport.run() }) .then(function (pageDocument) { return Excel.exportDocument(pageDocument, settings) }) .then(function (result) { result.download('arjs-excel') }); }, expPDF() { console.log('exportReport()--type:'); var ARJS = Core; var PDF = PdfExport; var settings = { info: { title: '快递单', author: 'GrapeCity inc.', }, pdfVersion:"1.7" } var pageReport = new ARJS.PageReport(); pageReport.load('/design-report.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) }) .then(function(result) { result.download('arjs-pdf') }); } } }; FontStore.registerFonts("/fonts/fontsConfig.json"); </script> <style> #viewer-host { width: 100%; height: 100vh; } </style>
导出Excel的方法
expExcel() { var ARJS = Core; var Excel = XlsxExport; var settings = { sheetName: '快递单', pageSettings: { size: 'A4', orientation: 'portrait' } } var pageReport = new ARJS.PageReport(); pageReport.load('design-report.rdlx-json') .then(function () { return pageReport.run() }) .then(function (pageDocument) { return Excel.exportDocument(pageDocument, settings) }) .then(function (result) { result.download('arjs-excel') }); },
导出PDF的方法
expPDF() { console.log('exportReport()--type:'); var ARJS = Core; var PDF = PdfExport; var settings = { info: { title: '快递单', author: 'GrapeCity inc.', }, pdfVersion:"1.7" } var pageReport = new ARJS.PageReport(); pageReport.load('/design-report.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) }) .then(function(result) { result.download('arjs-pdf') }); } }
4、预览结果
5、demo实例下载