耀极客论坛

 找回密码
 立即注册
查看: 398|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:46:01 | 显示全部楼层 |阅读模式
  Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计,编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法,一起看看吧
vue-cli使用stimulsoft.reports.js(保姆级教程)
第一部分:数据源准备
  以下是JSON数据的教程







  json数据结构
  1. {
  2. "数据源名":[
  3. // ...数据列表
  4. ]
  5. }
复制代码
  自己的测试JSON数据
  1. {
  2.     "data": [
  3.         {
  4.             "a": "我是A",
  5.             "b": "我是B",
  6.             "c": "我是C"
  7.         },
  8.         {
  9.             "a": "我是A",
  10.             "b": "我是B",
  11.             "c": "我是C"
  12.         },
  13.         {
  14.             "a": "我是A",
  15.             "b": "我是B",
  16.             "c": "我是C"
  17.         }
  18.     ]
  19. }
复制代码
  附上官方处数据(自己删减了一些数据让读者能更好看懂结构)
  1. {
  2. "Customers": [{
  3. "CustomerID": "ALFKI",
  4. "CompanyName": "Alfreds Futterkiste",
  5. "ContactName": "Maria Anders",
  6. "ContactTitle": "Sales Representative",
  7. "Address": "Obere Str. 57",
  8. "City": "Berlin",
  9. "Region": null,
  10. "PostalCode": "12209",
  11. "Country": "Germany",
  12. "Phone": "030-0074321",
  13. "Fax": "030-0076545"
  14. }, {
  15. "CustomerID": "ANATR",
  16. "CompanyName": "Ana Trujillo Emparedados y helados",
  17. "ContactName": "Ana Trujillo",
  18. "ContactTitle": "Owner",
  19. "Address": "Avda. de la Constitución 2222",
  20. "City": "México D.F.",
  21. "Region": null,
  22. "PostalCode": "05021",
  23. "Country": "Mexico",
  24. "Phone": "(5) 555-4729",
  25. "Fax": "(5) 555-3745"
  26. }]
  27. }
复制代码
第二部分:vue-cli引入stimulsoft.reports.js


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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 11:45 , Processed in 0.070195 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表