我们在开发一些web应用或者后台管理系统的时候，可能会遇到做报表的需求，同时支持在线设计。


Stimulsoft是什么？ 为您的应用程序添加高性能报表和分析功能！（Stimulsoft的官网是这么介绍的）

直接上手，我这里是用cli create了一个绿色纯天然无污染的vue demo，当然h5,react,ng以及…所有web应用中的用法应该都是大同小异

加载资源

通常来说，我们在web中使用外部资源，或者第三方工具库的时候都要先加载资源，所以先把Stimulsoft需要的资源先引入(这几个类库资源还是比较大，为了避免加载时间可以选择cdn加速，或者按需，或者你希望的姿势进行加载，只要顺序在使用里面对象属性之前即可)
这里是直接在public目录下新建的2个资源文件夹

资源结构
资源结构

1
2
3
4
5
6
7
8
9
<!-- css资源 -->
<link rel="stylesheet" href="./reportcss/stimulsoft.designer.office2013.whiteblue.css"/>
<link rel="stylesheet" href="./reportcss/stimulsoft.viewer.office2013.whiteblue.css"/>

<!-- js资源 -->
<script src="./reportjs/stimulsoft.reports.pack.js"></script>
<script src="./reportjs/stimulsoft.reports.maps.pack.js"></script>
<script src="./reportjs/stimulsoft.viewer.pack.js"></script>
<script src="./reportjs/stimulsoft.designer.pack.js"></script>

基础配置

设置key，如果拿到授权之后就可以有key，有了key使用报表就没有默认水印

1
Stimulsoft.Base.StiLicense.key = '获取授权的key'

设置报表的语言，语言包在这个demo的public文件夹下的localization

1
Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile('./localization/zh-CHS.xml', true)

viewer配置

页面上写一个容器，也就是报表的容器,创建完容器之后再写下面的js

1
<div id="viewer"></div>

实例化报表的可选项，比如工具栏toobar，工具栏上需要有什么，比如我需要显示设计按钮，可以在这个页面点开设计页

1
2
3
4
5
6
7
8
9
10
 //实例化报表的可选项
 const options = new Stimulsoft.Viewer.StiViewerOptions()
 //显示设计按钮，设置false或者不写则隐藏
 options.toolbar.showDesignButton = true

 //demo里面的options配置
options.appearance.scrollbarsMode = false
options.toolbar.showDesignButton = true
options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct
options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table

关于options的配置说明在这里，根据需要配就好了

使用报表模板

就是打开这个页面的时候，如果想加载已经有的报表模板，直接可以加载进来，因为同样的报表模板可以应用在不同的场景;

实例化一个预览对象viewer，将上面创建的可选项对象options传入预览的报表,然后实例化一个空报表对象，用这个空报表对象去加载引入的报表模板（报表模板实际是一个可以序列化的json对象，但是默认是.mrt文件。所以可以选择loadFile,也可以load，具体取决于你自己的保存格式，后面会介绍如何生成这个模板json，可以直接发给后端帮你保存，我是把它裁剪成json代码段然后保存成一个json文件，每个json文件对应一个模板）说明可以看这里

1
2
3
let viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false)
let report = new Stimulsoft.Report.StiReport()
report.load('json格式的代码')    //举例这段json直接从后端接口返回，直接给这里赋值即可

加载数据源

加载数据源的目的是为了在设计报表的时候可以通过赋值的数据源拖拽设计想要的报表格式,如果数据源不同，模板上的动态数据将展示不出来;

实例化一个数据源，然后往里面传入数据，数据结构可以根据需要自定义,

1
2
3
4
5
6
7
let data = {
	name:'小方块',
	age:18
}
let strDataSorce = JSON.stringify(data)
let dataSet = new Stimulsoft.System.Data.DataSet('hardy')    //数据源名称
dataSet.readJson(strDataSorce)

注册数据源

1
report.regData('hardy', 'hardy', dataSet)

刷新数据源字典

刷新之后才能在数据源的菜单看到新数据

1
2
report.dictionary.synchronize()  
`

创建完毕之后把它渲染到一个dom就好了

1
2
viewer.report = report
viewer.renderHtml('viewer')
运行效果
运行效果

viewer上面有很多toobar相对应的事件处理函数，具体可以看这里，然后找到自己需要的。
刚才在上面开启了设计按钮，那么点击设计按钮的时候会触发viewer上面的onDesignReport方法，如果不需要直接开启设计功能则把options.toolbar.showDesignButton = true去掉或者改成=false，如果需要这个功能就再创建一个容器用来渲染设计功能的界面。就像这样

1
2
3
4
5
6
// 进入设计面板
viewer.onDesignReport = function (e) {
	if (designer == null) {                 //这里可以声明一个设计和预览两个方法都能访问到的desight初始化null值，避免对象重复实例化
	    _createDesightModel(e.report)       //_createDesightModel和单独做设计功能一样，只是渲染的容器改成相对应的容器就好了        
	};
}

desight配置

创建一个容器

1
<div class="desight"></div>

实例化一个报表对象

1
let report = new Stimulsoft.Report.StiReport()

加载模板

1
report.load('你的jsonfile模板')

加载数据源,为了在设计的时候可以拖拽数据源到相应的比如二维码，条码，产品码等或者组合成快递面单上面，直接设计成一个模板，供多处使用

1
2
3
4
5
6
7
8
9
let data = {
	name:'小方块',
	age:18
}
let strDataSorce = JSON.stringify(data)                      //实例化一个数据源
var dataSet = new Stimulsoft.System.Data.DataSet('hardy')    //设置数据源
dataSet.readJson(strDataSorce)                               //给数据源赋值
report.regData('hardy', 'hardy', dataSet)                    //注册数据源
report.dictionary.synchronize()                              //更新字典

设计模板相关配置

实例化可选项，关于设计模板的可选项可以在这里查看

1
2
3
4
5
6
7
let options = new Stimulsoft.Designer.StiDesignerOptions()

//我的demo中配置
options.appearance.fullScreenMode = true      //是否全屏
options.toolbar.showFileMenuExit = true       //显示文件菜单的退出
options.toolbar.showFileMenuClose = false     //不显示关闭按钮
options.toolbar.showFileMenuSaveAs = true     //文件菜单显示另存为

实例化一个设计模版对象，将配置的可选项传入

1
let designer = new Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false)

保存和另存为

设计和预览不同，设计之后你可能需要保存，或者另存为新的文件

designer原型上自带了很多操作函数，具体可以查看这里,通过designer直接调用即可，比如保存和另存为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//保存     点文件菜单的保存触发
designer.onSaveReport = function (args) {
    let jsonReport = args.report.saveToJsonString()     //拿到当前设计的这个模板的jsonfile
    //拿到之后你可以自定义要怎么做,可以发送到后端去保存
}

//另存为    点文件菜单的另存为触发,同时触发一个可以重命名文件进行下载的窗口
designer.onSaveAsReport = function(args){
	let jsonReport = args.report.saveToJsonString()     //拿到当前设计的这个模板的jsonfile
	//和保存一样可以做喜欢做的事
}

//退出       点文件菜单的退出触发
designer.onExit = function(){
   //做喜欢的事
}

渲染报表

1
2
designer.report = report
designer.renderHtml('desight')

运行效果1
运行效果1
运行效果2
运行效果2

如果要将jsonfile下载至本地的话，可以使用这样的downloadJjsonFile方法,downloadJjsonFile(要下载的代码片段，下载的文件命名，下载的文件类别),这个方法需要依赖一个a标签，写在页面上哪里都行，只是要使用它的download方法

这里的type指的是Content-Type,根据这个可以规定下载的文件类型,例如下载json,type就是‘application/json’,Content-Type对照表：

1
2
3
4
5
6
7
8
9
10
11
12
13
const downloadJjsonFile = (ctx,name,type) => {
	let _a = document.querySelector('#a');
	let _file = new Blob([ctx],{ type });
	_a.href = URL.createObjectURL(file);
	_a.download = name;
	_a.dispatchEvent(new MouseEvent('click', {'bubbles': false, 'cancelable': true}));
}

/** html */
<a id="a"></a>

/** 触发这个方法，传入参数就可以将代码片段下载成一个文件了 */
<button οnclick="downloadJjsonFile('hwllo word', 'downloadJjsonFile.json', 'application/json')">Test Download</button>

写这篇文章的时候简单写的demo：https://github.com/HHardyy/Stimulsoft-in-web

2020第一篇，最近比较忙，框架升级，轮子维护&&开发，最近在搞web异常监控，就是针对web做的代码监控，回头看看能不能写一个，2019年比较幸运，入职6个月试用期，然后1个月提前转正，然后感谢大家把优秀员工的名额给了我，然后19年学的东西全在码云的提交记录了，等有时间再整理一下，20年给自己定了新的flag，继续奔跑吧年轻人！！！睡是什么，我不知道！！！！。