vue-cli使用stimulsoft.reports.js的详细教程
作者:小C好好干饭 时间:2024-04-09 10:58:59
vue-cli使用stimulsoft.reports.js(保姆级教程)
第一部分:数据源准备
以下是JSON数据的教程
json数据结构
{
"数据源名":[
// ...数据列表
]
}
自己的测试JSON数据
{
"data": [
{
"a": "我是A",
"b": "我是B",
"c": "我是C"
},
{
"a": "我是A",
"b": "我是B",
"c": "我是C"
},
{
"a": "我是A",
"b": "我是B",
"c": "我是C"
}
]
}
附上官方处数据(自己删减了一些数据让读者能更好看懂结构)
{
"Customers": [{
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545"
}, {
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constitución 2222",
"City": "México D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745"
}]
}
第二部分:vue-cli引入stimulsoft.reports.js
附上App.vue代码
分别有展示数据、打印数据、保存数据、导入json数据的功能测试
<template>
<div id="app">
<div>
<h2>Stimulsoft Reports.JS Viewer</h2>
<button @click="print">打印</button>
<button @click="save">保存</button>
<button @click="setJson">设置JSON</button>
<div id="viewer"></div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {};
},
// 加载官方示例模板代码
mounted: function () {
console.log("加载查看器视图");
// 工具栏
console.log("创建具有默认选项的报表查看器");
var viewer = new window.Stimulsoft.Viewer.StiViewer(
null,
"StiViewer",
false
);
// 报表
console.log("创建一个新的报表实例");
var report = new window.Stimulsoft.Report.StiReport();
// 加载文件
console.log("从url加载报告");
report.loadFile("/reports/SimpleList.mrt");
// 创建报表
console.log("将报表分配给查看器,报表将在呈现查看器之后自动生成 ");
viewer.report = report;
// 注入标签
console.log("将查看器呈现给选定的元素");
viewer.renderHtml("viewer");
console.log("加载成功完成!");
},
methods: {
// 调用打印机打印数据
print() {
var report = new window.Stimulsoft.Report.StiReport();
report.loadFile("/reports/SimpleList.mrt");
report.print();
},
// 导出保存数据
save() {
var report = new window.Stimulsoft.Report.StiReport();
report.loadFile("/reports/SimpleList.mrt");
// 将呈现的报告保存为JSON字符串
var json = report.saveDocumentToJsonString();
console.log("json", json);
// 获取报告文件名
var fileName = report.reportAlias
? report.reportAlias
: report.reportName;
console.log("report.reportName", report.reportName);
console.log("report.reportAlias", report.reportAlias);
console.log("fileName", fileName);
// 将数据保存到文件
window.Stimulsoft.System.StiObject.saveAs(
json,
fileName + ".mdc",
"application/json;charset=utf-8"
);
},
// 获取json数据并写入页面
setJson() {
var report = new window.Stimulsoft.Report.StiReport();
// report.loadFile("/reports/SimpleList.mrt");// 官方数据模板
report.loadFile("/reports/Test.mrt");// 自己的数据模板
// 创建新的DataSet对象
var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
// 将JSON数据文件从指定的URL加载到DataSet对象
// dataSet.readJsonFile("/reports/Demo.json");//官方数据
dataSet.readJsonFile("/reports/Test.json");// 自己的json数据
//文件用上面的readJsonFile方式导入,接口网络请求用下面这种方式进行导入
// let json=/*此处省略获取数据请求*/
// dataSet.readJson(JSON.stringify(json));
// 清除报告模板中数据
report.dictionary.databases.clear();
// 注册数据集对象
report.regData("JSON", "JSON", dataSet);
// 用注册数据呈现报表
// report.render();
// 工具栏
var viewer = new window.Stimulsoft.Viewer.StiViewer(
null,
"StiViewer",
false
);
// 创建报表
viewer.report = report;
// 注入标签
viewer.renderHtml("viewer");
},
},
};
</script>
<style>
</style>
最后附上本人测试项目连接
项目链接
链接: https://pan.baidu.com/s/1HahzqHgFXvHT6OuE4IqzgQ
提取码: vr57
工具链接
链接: https://pan.baidu.com/s/1374m-kCBZBeOdlDrAbXtbQ
提取码: dfkc
官方教程链接
https://www.evget.com/serializedetail/510
来源:https://blog.csdn.net/qq_44408913/article/details/121972665
标签:vue-cli,stimulsoft.reports.js
0
投稿
猜你喜欢
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2023-01-05 03:36:18
对Python进行数据分析_关于Package的安装问题
2021-07-29 17:23:42
python小球落地问题及解决(递归函数)
2022-11-08 23:33:01
SQL Server 触发器详情
2024-01-12 23:53:23
Python中格式化字符串输出的4种方式小结
2023-08-10 21:30:49
python 实现多维数组(array)排序
2022-03-26 07:35:48
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2021-01-14 10:20:29
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2022-11-29 08:22:38
Python对文件操作知识汇总
2023-02-26 11:10:59
Django模板报TemplateDoesNotExist异常(亲测可行)
2023-11-02 18:53:49
python用sqlacodegen根据已有数据库(表)结构生成对应SQLAlchemy模型
2024-01-23 02:39:44
python3解析库pyquery的深入讲解
2022-01-11 23:14:48
Python探索之ModelForm代码详解
2022-05-16 06:14:33
Python 海象运算符( :=)的三种用法
2023-08-25 02:46:08
解决mysql的int型主键自增问题
2024-01-28 11:54:45
python中使用input()函数获取用户输入值方式
2021-06-23 04:03:11
Python实现人机中国象棋游戏
2023-01-28 21:33:52
避坑:Sql中 in 和not in中有null值的情况说明
2024-01-22 17:01:33
python Django中models进行模糊查询的示例
2023-08-02 05:54:09
python如何修改文件时间属性
2022-12-04 06:38:24