Stimulsoft Vue在线编辑报表的数据集传递
使用Stimutsoft vue 在线编辑示例实现数据集传递,将我们事先查询出来的结果集传递到设计器,即可预览结果集显示效果
<template>
<div id="app">
<div>
<h2>Stimulsoft Reports.JS Designer</h2>
<button @click="getReport" >保存</button>
<div id="designer"></div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
designer: undefined
}
},
mounted: function() {
//在线编辑时,如果要配置可直接访问数据库的数据源,必须配置代理服务
StiOptions.WebServer.url = "http://localhost:8088/JavaDataAdapter/JSDataAdapter/";
console.log('Loading Designer view');
console.log('Set full screen mode for the designer');
var options = new window.Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = false;
console.log('Create the report designer with specified options');
this.designer = new window.Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
console.log('Create a new report instance');
var report = new window.Stimulsoft.Report.StiReport();
console.log('Load report from url');
// report.loadFile('reports/SimpleList.mrt');
// report.loadFile('reports/SimpleList1.mrt');
let loadFile1 = ()=>{
report.loadFile('reports/50_人员条码.mrt');
let list = {'人员列表':[{"CODE":"A0012","NAME":"张三","CARD_PWD":"A0012"},{"CODE":"A0013","NAME":"李四","CARD_PWD":"A0012"}]}
let dataSet = new window.Stimulsoft.System.Data.DataSet("JSON")
console.log(dataSet)
//读取json格式文件数据集
// dataSet.readJsonFile("reports/User.json")
//读取json字符串数据集
dataSet.readJson(list)
report.dictionary.databases.clear()
report.regData("JSON","JSON",dataSet)
}
loadFile1()
console.log(report.data)
console.log('Edit report template in the designer');
this.designer.report = report;
console.log('Rendering the viewer to selected element');
this.designer.renderHtml('designer');
console.log(this.designer)
//在线编辑保存模板时,重写保存按钮方法,方法中获取模板源码,并且可更新服务器上模板文件,实现在线保存,默认保存都是下载模板文件。
this.designer.onSaveReport = (i,a,b,c)=>{
console.log(a)
// a()
this.designer.internalSaveReport(i.report, i.fileName)
console.log(JSON.stringify(i.report.saveToJsonString()))
// return true;
};
//重写预览按钮点击整件
this.designer.onPreviewReport = (i,a,b,c)=>{
};
console.log('Loading completed successfully!');
},
methods:{
getReport(){
console.log("....")
console.log(this.designer.report)
}
}
}
</script>
<style>
</style>
原文地址:https://blog.csdn.net/ldz_wolf/article/details/142784609
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!