使用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>