<template>
<div id="viewer-host">
<JSViewer ref="reportViewer"></JSViewer>
</div>
</template>
<script>
import Vue from "vue";
import { Viewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
export default {
name: "App",
components: {
JSViewer: Viewer,
},
methods:{
loadData: async function(){
//使用Fetch Api提取数据 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
const headers = new Headers();
const dataRequest = new Request(
"https://demodata.grapecity.com/northwind/api/v1/Customers",
{
headers: headers,
}
);
const response = await fetch(dataRequest);
const data = await response.json();
return data;
},
loadReport: async function(){
//从文件加载定义报表
const reportResponse = await fetch( "/static/reportJson/test.rdlx-json");
const report = await reportResponse.json();
return report;
}
},
mounted: async function(){
const data = await this.loadData();
const report = await this.loadReport();
report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
this.$refs.reportViewer.Viewer().open(report);
}
};
</script>
<style>
#viewer-host {
width: 100%;
height: 100%;
}
</style>
|