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

vue-cli使用stimulsoft.reports.js(保姆级教程)

第一部分:数据源准备

以下是JSON数据的教程

vue-cli使用stimulsoft.reports.js的详细教程_第1张图片

vue-cli使用stimulsoft.reports.js的详细教程_第2张图片
vue-cli使用stimulsoft.reports.js的详细教程_第3张图片
vue-cli使用stimulsoft.reports.js的详细教程_第4张图片
vue-cli使用stimulsoft.reports.js的详细教程_第5张图片
vue-cli使用stimulsoft.reports.js的详细教程_第6张图片
vue-cli使用stimulsoft.reports.js的详细教程_第7张图片

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

vue-cli使用stimulsoft.reports.js的详细教程_第8张图片
vue-cli使用stimulsoft.reports.js的详细教程_第9张图片

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







最后附上本人测试项目连接

项目链接
链接: 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue-cli使用stimulsoft.reports.js的详细教程)