自定义导出

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实例下载

vue-export.rar

页面树结构

自定义导出