在Vue中如何自定义导出Excel方法

登录

1、首先自己创建一个Vue的项目

2、进行自定义方法的编写

<template>
<div>
<button @click="expExcel">Excel</button>
</div>
<div id="viewer-host">
<JSViewer v-bind:availableExports="['pdf', 'xlsx', 'html']" v-bind:report="{ Uri: 'design-report.rdlx-json' }"></JSViewer>
</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';
export default {
name: "App",
components: {
JSViewer: Viewer,
},
methods:{
expExcel() {
var ARJS = GC.ActiveReports.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') });
}
}
};
</script>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-viewer.css" ></style>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>

复制代码

3、具体demo见附件

		自动登录	找回密码
密码			立即注册

0 个回复