vue-cli使用stimulsoft.reports.js的详细教程

极客

　　Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计，编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法，一起看看吧
vue-cli使用stimulsoft.reports.js（保姆级教程）
第一部分：数据源准备
　　以下是JSON数据的教程

　　json数据结构

2. {
3. "数据源名":[
4. // ...数据列表
5. ]
6. }

复制代码

　　自己的测试JSON数据

2. {
3.     "data": [
4.         {
5.             "a": "我是A",
6.             "b": "我是B",
7.             "c": "我是C"
8.         },
9.         {
10.             "a": "我是A",
11.             "b": "我是B",
12.             "c": "我是C"
13.         },
14.         {
15.             "a": "我是A",
16.             "b": "我是B",
17.             "c": "我是C"
18.         }
19.     ]
20. }

复制代码

　　附上官方处数据（自己删减了一些数据让读者能更好看懂结构）

2. {
3. "Customers": [{
4. "CustomerID": "ALFKI",
5. "CompanyName": "Alfreds Futterkiste",
6. "ContactName": "Maria Anders",
7. "ContactTitle": "Sales Representative",
8. "Address": "Obere Str. 57",
9. "City": "Berlin",
10. "Region": null,
11. "PostalCode": "12209",
12. "Country": "Germany",
13. "Phone": "030-0074321",
14. "Fax": "030-0076545"
15. }, {
16. "CustomerID": "ANATR",
17. "CompanyName": "Ana Trujillo Emparedados y helados",
18. "ContactName": "Ana Trujillo",
19. "ContactTitle": "Owner",
20. "Address": "Avda. de la Constitución 2222",
21. "City": "México D.F.",
22. "Region": null,
23. "PostalCode": "05021",
24. "Country": "Mexico",
25. "Phone": "(5) 555-4729",
26. "Fax": "(5) 555-3745"
27. }]
28. }

复制代码

第二部分：vue-cli引入stimulsoft.reports.js

　　附上App.vue代码
分别有展示数据、打印数据、保存数据、导入json数据的功能测试

2. ‹template>
3.   ‹div id="app">
4.     ‹div>
5.       ‹h2>Stimulsoft Reports.JS Viewer‹/h2>
6.       ‹button @click="print">打印‹/button>
7.       ‹button @click="save">保存‹/button>
8.       ‹button @click="setJson">设置JSON‹/button>
9.       ‹div id="viewer">‹/div>
10.     ‹/div>
11.   ‹/div>
12. ‹/template>
14. ‹script>
15. export default {
16.   name: "app",
17.   data() {
18.     return {};
19.   },
20.     // 加载官方示例模板代码
21.   mounted: function () {
22.     console.log("加载查看器视图");
23.     // 工具栏
24.     console.log("创建具有默认选项的报表查看器");
25.     var viewer = new window.Stimulsoft.Viewer.StiViewer(
26.       null,
27.       "StiViewer",
28.       false
29.     );
31.     // 报表
32.     console.log("创建一个新的报表实例");
33.     var report = new window.Stimulsoft.Report.StiReport();
35.     // 加载文件
36.     console.log("从url加载报告");
37.     report.loadFile("/reports/SimpleList.mrt");
39.     // 创建报表
40.     console.log("将报表分配给查看器，报表将在呈现查看器之后自动生成  ");
41.     viewer.report = report;
43.     // 注入标签
44.     console.log("将查看器呈现给选定的元素");
45.     viewer.renderHtml("viewer");
47.     console.log("加载成功完成!");
48.   },
49.   methods: {
50.     // 调用打印机打印数据
51.     print() {
52.       var report = new window.Stimulsoft.Report.StiReport();
53.       report.loadFile("/reports/SimpleList.mrt");
54.       report.print();
55.     },
56.     // 导出保存数据
57.     save() {
58.       var report = new window.Stimulsoft.Report.StiReport();
59.       report.loadFile("/reports/SimpleList.mrt");
60.       // 将呈现的报告保存为JSON字符串
61.       var json = report.saveDocumentToJsonString();
62.       console.log("json", json);
63.       // 获取报告文件名
64.       var fileName = report.reportAlias
65.         ? report.reportAlias
66.         : report.reportName;
67.       console.log("report.reportName", report.reportName);
68.       console.log("report.reportAlias", report.reportAlias);
69.       console.log("fileName", fileName);
70.       // 将数据保存到文件
71.       window.Stimulsoft.System.StiObject.saveAs(
72.         json,
73.         fileName + ".mdc",
74.         "application/json;charset=utf-8"
75.       );
76.     },
77.     // 获取json数据并写入页面
78.     setJson() {
79.       var report = new window.Stimulsoft.Report.StiReport();
81.       // report.loadFile("/reports/SimpleList.mrt");// 官方数据模板
82.       report.loadFile("/reports/Test.mrt");// 自己的数据模板
83.       
84.       // 创建新的DataSet对象
85.       var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
86.       // 将JSON数据文件从指定的URL加载到DataSet对象
88.       // dataSet.readJsonFile("/reports/Demo.json");//官方数据
89.       dataSet.readJsonFile("/reports/Test.json");// 自己的json数据
90.         
91.   //文件用上面的readJsonFile方式导入，接口网络请求用下面这种方式进行导入
92.       // let json=/*此处省略获取数据请求*/
93.       // dataSet.readJson(JSON.stringify(json));
94.         
95.       // 清除报告模板中数据
96.       report.dictionary.databases.clear();
97.         
98.       // 注册数据集对象
99.       report.regData("JSON", "JSON", dataSet);
100.         
101.       // 用注册数据呈现报表
102.       // report.render();
103.       // 工具栏
104.       var viewer = new window.Stimulsoft.Viewer.StiViewer(
105.         null,
106.         "StiViewer",
107.         false
108.       );
109.       // 创建报表
110.       viewer.report = report;
111.       // 注入标签
112.       viewer.renderHtml("viewer");
113.     },
114.   },
115. };
116. ‹/script>
118. ‹style>
119. ‹/style>

复制代码

　　最后附上本人测试项目连接
　　项目链接
链接: https://pan.baidu.com/s/1HahzqHgFXvHT6OuE4IqzgQ
　　提取码: vr57 
　　工具链接
　　链接: https://pan.baidu.com/s/1374m-kCBZBeOdlDrAbXtbQ 
　　提取码: dfkc
　　官方教程链接
https://www.evget.com/serializedetail/510
　　到此这篇关于vue-cli使用stimulsoft.reports.js的文章就介绍到这了,更多相关vue-cli使用stimulsoft.reports.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

---