在进行设计时会绑定一些测试数据用于查看报表的展示效果，但往往在实际的运行系统当中，报表数据会根据实际的业务产生的。所以我们就需要在运行时候再去为报表传递数据值。
为解决此类问题，可以将报表数据源类型设置为 内嵌数据集，然后在加载报表时，将数据值传递。示例如下
1、实现代码
// Use Fetch API to set up the request https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
const headers = new Headers();
const dataRequest = new Request(
"https://demodata.grapecity.com/northwind/api/v1/Products",
{
headers: headers
}
);
// fetch the data
const response = await fetch(dataRequest);
const data = await response.json();
// fetch the report definition, it is just a json file
const reportResponse = await fetch("Products.rdlx-json");
const report = await reportResponse.json();
// feed the data to the report
report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
2、App.vue的整体代码
<template ref='reportViewer'>
<div id="viewer-host"><ReportViewer ref="reportViewer" /></div>
</template>
<script>
// import Vue from "vue";
import { Viewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
export default {
name: "App",
components: {
ReportViewer: 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("url1.rdlx-json");
const report = await reportResponse.json();
console.log(report);
return report;
}
},
mounted: async function(){
const viewer = this.$refs.reportViewer.Viewer();
const data = await this.loadData();
const report = await this.loadReport();
report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
console.log(report.DataSources[0].ConnectionProperties.ConnectString);
viewer.open(report);
}
};
</script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
3、预览展示结果
4、Demo实例下载
