stimulsoft report for js vue3使用
项目后端使用的java,试验过积木报表(web界面类型的)、JasperReport(.jasper报表文件)、stimulsoft web版本(.mrt报表文件)
我们的项目是前后端分离的,用积木报表(开箱即用集成前后端的项目)的话 相当于要另外搭建一个类似 报表中心的站点,报表稍微复杂一点的时候,感觉用起来就很麻烦。
JasperReport也是一个开源的报表工具,功能是比较强大的,但是他上手不简单,而且个人觉得官方文档看起来可费劲了。最重要的是他支持导出的文件格式太少了,好像就支持2种导出格式。
stimulsoft report 是一个付费的报表工具,功能强大,用起来也比较容易上手。以前java有个项目用过,但是只要一加载报表,就很容易内存溢出。
其实上面那3种 如果加载的报表文件比较大的话,都是很容易导致内存溢出(因为报表的渲染是在服务器完成的,比如1个人请求报表时,数据量大小可能就10kb,但是因为每一页都加载logo图片,到报表出来可能就变成10M了,如果是1000个人同时请求,可想而知服务器的压力)的。项目经常会有加载大文件的报表,所以上面那3种暂时yi不考虑,最后选用了 stimulsoft 的js版本,报表渲染的压力就交给客户端而不是服务器了,服务器只需要把数据的json返回给前端就好了。
1.登录到官方网站(https://www.stimulsoft.com/en/)下载依赖包和license.key文件

2.在index.html文件按需引入js文件
<!-- stimulsolt报表 -->
<script type="module" src="src/library/stimulsoft/scripts/stimulsoft.reports.js"></script>
<script type="module" src="src/library/stimulsoft/scripts/stimulsoft.viewer.js"></script>
<script type="module" src="src/library/stimulsoft/scripts/stimulsoft.designer.js"></script>
<script type="module" src="src/library/stimulsoft/scripts/stimulsoft.blockly.editor.js"></script>
3.vue文件编写
<template>
<!-- 报表 -->
<div id="viewerContent"></div>
<script>
里面用到的mrt文件是使用 stimulsoft designer 创建的文件
Stimulsoft.Base.StiLicense.loadFromFile('src/library/stimulsoft/reports/license.key') //加载秘钥文件var mrtPath = '/src/reports/test.mrt' //mrt文件var report = Stimulsoft.Report.StiReport.createNewReport(); //创建报表report.loadFile(mrtPath); //加载报表文件var dataSet = new Stimulsoft.System.Data.DataSet("JSON"); //创建数据源对象const res = await Http.post('/api/report/getData') //向服务器请求json数据dataSet.readJson(res.data) //把json数据放到数据源中report.dictionary.databases.clear(); //清空之前的的数据源report.regData("JSON", "JSON", dataSet); //绑定数据源var options = new Stimulsoft.Viewer.StiViewerOptions(); //创建报表渲染配置对象// exports 是工具栏中导出按钮的配置(默认显示11种导出方式),按需进行配置显示,false代表不显示options.exports.showExportToHtml5 = false options.exports.showExportToOpenDocumentCalc = falseoptions.exports.showExportToXps = falseoptions.exports.showExportDataOnly = falseoptions.exports.showExportToCsv = falseoptions.exports.showExportToDocument = falseoptions.exports.showExportToExcel2007 = falseoptions.exports.showExportToImagePng = false //导出Png图片options.exports.showExportToImageJpeg = falseoptions.exports.showExportToImageBmp = falseoptions.exports.showExportToPdf = false //导出pdfoptions.exports.showExportToPowerPoint = false //导出pptoptions.exports.showExportToWord2007 = false //导出wordoptions.exports.showExportToText = false //导出txt文件//options.exports.showExportDialog = false //点击导出后是否显示选项窗体//options.exports.showExportToHtml = false //导出html//options.exports.showExportToOpenDocumentWriter = false//options.exports.openAfterExport = false//options.exports.storeExportSettings = false//options.exports.showOpenAfterExport = falsevar viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false); //报表渲染对象,并传入渲染参数viewer.report = report;viewer.renderHtml("viewerContent"); //在id是viewerContent中渲染报表
4.关于报表多语言问题
报表的多语言是通过Stimulsoft.Base.Localization实现的,可以通过修改这个对象的值修改多语言。 可参考StiLocalization | main

出来的结果:

参考文档:
Stimulsoft Publish
Reports and Dashboards
Stimulsoft | main
相关文章:
stimulsoft report for js vue3使用
项目后端使用的java,试验过积木报表(web界面类型的)、JasperReport(.jasper报表文件)、stimulsoft web版本(.mrt报表文件) 我们的项目是前后端分离的,用积木报表(开箱即…...
JavaScript yield关键字使用举例
yield是JavaScript中的一个关键字,用于定义生成器函数(generator function)中的暂停点。它允许函数在执行过程中暂停,并在下一次调用时从暂停点继续执行。下面是一个使用yield的例子: function* generator() {yield Hello;yield World; }const gen = generator();console…...
18. 查看帖子详情
文章目录 一、建立路由二、开发GetPostDetailHandler三、编写logic四、编写dao层五、编译测试运行 一、建立路由 router/route.go v1.GET("/post/:id", controller.GetPostDetailHandler)二、开发GetPostDetailHandler controller/post.go func GetPostDetailHand…...
【算法刷题】Day30
文章目录 1. 汉诺塔问题题干:算法原理:代码: 2. 合并两个有序链表题干:算法原理:代码: 3. 反转链表题干:算法原理:代码: 4. 最大子数组和题干:算法原理&#…...
docker容器镜像管理+compose容器编排(持续更新中)
目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、 容器命令 3.1 使用Ubuntu 3.1.1 下载镜像 3.1.2 新建和启动容器 run 3.1.3交互式 compose编排与部署 1. docker-compose部署 2. docker-compose.yml模板 …...
【Greenhills】MULTIIDE集成第三方的编辑器进行源文件编辑工作
【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 在使用GHS进行工作的时候,可以集成第三方的编辑器进行源文件编辑工作 2、 问题场景 用于解决在GHS中进行项目开发时,对于GHS的编辑器使用不习惯,想要切换到其他第三方的编辑…...
【Flutter】 search_page使用心得
https://pub.dev/packages/search_page 以上就是search_page地址。使用方法跟具有哪些功能网页都有,这篇文章主要讲我在使用这个插件时遇到的坑。 坑1:不能自己刷新界面 我在search_page中传入的builder是带有checkbox的ListTile,当我点击…...
前端Vue列表组件 list组件:实现高效数据展示与交互
前端Vue列表组件 list组件:实现高效数据展示与交互 摘要:在前端开发中,列表组件是展示数据的重要手段。本文将介绍如何使用Vue.js构建一个高效、可复用的列表组件,并探讨其在实际项目中的应用。 效果图如下: 一、引言…...
每日OJ题_哈希表⑤_力扣49. 字母异位词分组
目录 力扣49. 字母异位词分组 解析代码 力扣49. 字母异位词分组 49. 字母异位词分组 难度 中等 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入…...
【Linux】-Linux下的软件商店yum工具介绍(linux和windows互传文件仅仅一个拖拽搞定!!!!)
目录 1.Linux 软件包管理器yum 1.1快速认识yum 1.2 yumz下载方式(如何使用yum进行下载,注意下载一定要是root用户或者白名单用户(可提权)) 1.2.1下载小工具rzsz 1.2.2 rzsz使用 1.2.2查看软件包 1.3软件的卸载 2.yum生…...
320: 鸡兔同笼(python)
题目描述 一个笼子里关了鸡和兔(鸡有2只脚,兔又4只脚,没有例外)。已知笼子里面脚的总数a,问笼子里面至少有多少只动物,至多有多少只动物? 输入 多组测试数据。第一行是测试数据的组数n&#…...
CentOS 8启动流程
一、BIOS与UEFI BIOS Basic Input Output System的缩写,翻译过来就是“基本输入输出系统”,是一种业界标准的固件接口,第一次出现在1975年,是计算机启动时加载的第一个程序,主要功能是检测和设置计算机硬件,引导系统启动。 UEFI Unified Extensible Firmware interfac…...
js【详解】原型 vs 原型链
原型 每个 class 都有显示原型 prototype每个实例都有隐式原型_proto_实例的_proto_指向对应 class 的 prototype 如下范例: class Student 创建了 实例 xialuo 获取属性 xialuo.name 或执行方法 xialuo.sayhi()时,先在自身属性和方法寻找࿰…...
贪心算法: 奶牛做题
5289. 奶牛做题 - AcWing题库 贝茜正在参加一场奶牛智力竞赛。 赛事方给每位选手发放 n 张试卷。 每张试卷包含 k 道题目,编号 1∼k。 已知,不同卷子上的相同编号题目的难度相同,解题时间也相同。 其中,解决第 i 道题(…...
go语言tcp协议实现文件上传
一、客户端实现方案: package mainimport ("fmt""io""net""os" )func sendFile(filePath string, conn net.Conn) {defer conn.Close()// 获取文件名fileInfo, err : os.Stat(filePath)if err ! nil {fmt.Println("E…...
【Unity】利用二进制数据持久化 【练习学习项目/有不足之处欢迎斧正/侵删】
1.为编辑器菜单栏添加新的选项入口 通过Unity提供的MenuItem特性在菜单栏添加选项按钮 特性名:MenuItem 命名空间:UnityEditor 要求:一定是静态方法;新建的这个菜单栏按钮 必须有至少一个斜杠 不然会报错 它不支持只有一个菜单…...
做伦敦银要等怎样的价格与行情?
对于不同的伦敦银投资者来说,合适的入市价格和好的行情机会,标准可能并不一样,因为不同人有不同的交易策略、风险偏好和盈利目标。对于喜欢做趋势跟踪的投资者来说,一波明显而持续的上涨或下跌趋势,可能就是最好的行情…...
SpringBoot多数据源切换 多数据源事务解决方案 二
https://zhuanlan.zhihu.com/p/612825647?utm_id0 https://blog.csdn.net/guzhangyu12345/article/details/108559810 SpringBoot多数据源事务解决方案 https://blog.csdn.net/u013407099/article/details/124526396多数据源切换下保证事务解决方案 https://blog.csdn.net/re…...
ElasticSearch 搜索推荐
Term Suggester "suggest_mode":"missing" missing 默认选项,不返回精准匹配到的分词结果 "suggest_mode":"popular" popular 大于等于搜索词频率的返回 "suggest_mode":"always", 不做任何限制&qu…...
Linux纯命令行查看文本文件
处理超大文本文件时,你可能希望避免一次性加载整个文件,这可能会耗尽内存资源。以下是一些在命令行中查看大文本文件的方法,它们适用于Linux和Unix系统,包括Mac OS X,而在Windows中,你可以使用类似的工具或…...
Qwen3-VL-8B在智能客服场景的应用:让客服真正看懂用户图片
Qwen3-VL-8B在智能客服场景的应用:让客服真正看懂用户图片 1. 智能客服的视觉盲区 你有没有遇到过这样的情况:当用户给客服发送一张商品照片询问"这个配件能用在XX型号上吗?",得到的回复却是"请您提供商品编号&q…...
实战指南:利用JPerf优化嵌入式网络性能测试
1. JPerf工具基础入门:从零开始网络性能测试 第一次接触嵌入式网络性能测试时,我被各种专业术语和复杂参数搞得晕头转向。直到发现了JPerf这个神器,才真正打开了网络调优的大门。JPerf实际上是iPerf的图形化版本,它把原本需要记忆…...
STM32CubeIDE(CUBE-MX HAL库)实战:串口通信从阻塞到DMA的进阶应用
1. 从零开始:STM32CubeIDE与CUBE-MX的串口通信基础 第一次接触STM32的串口通信时,我像大多数初学者一样被各种专业术语搞得晕头转向。直到发现STM32CubeIDE配合CUBE-MX这个可视化配置工具,才真正体会到什么叫"开发效率翻倍"。这里分…...
从相似度矩阵到业务落地:AdaFace模型测试结果全解读(含自研推理代码分享)
从相似度矩阵到业务落地:AdaFace模型测试结果全解读(含自研推理代码分享) 当开发者完成AdaFace模型训练后,如何准确评估模型效果并实现业务落地成为关键挑战。相似度矩阵作为人脸识别系统的核心输出,其解读直接影响身份…...
智慧校园系统采购,如何平衡功能、价格与服务?
✅作者简介:合肥自友科技 📌核心产品:智慧校园平台(包括教工管理、学工管理、教务管理、考务管理、后勤管理、德育管理、资产管理、公寓管理、实习管理、就业管理、离校管理、科研平台、档案管理、学生平台等26个子平台) 。公司所有人员均有多…...
Verdi波形调试效率翻倍指南:除了拖信号,这些隐藏功能(信号计数、逻辑运算、模拟波形)你用了吗?
Verdi波形调试效率翻倍指南:解锁隐藏的高级功能 在数字验证工程师的日常工作中,Verdi作为业界主流的波形查看工具,其基础功能可能早已被大家所熟悉。但你是否知道,Verdi还隐藏着一系列能大幅提升调试效率的高级功能?本…...
MPI-3.x,4.x,5.x新增核心功能
文章目录MPI-3.x,4.x,5.x新增核心功能一、MPI 3.x 系列(现代MPI的基石)MPI 3.0(2012)——革命性升级MPI 3.1(2015)——小幅增强二、MPI 4.x 系列(超大问题 下一代架构)MPI 4.0&…...
号令天下专业版手机尾号是五鬼好吗
在数字能量学的趣味研究领域中,手机号码的数字组合被赋予了各种独特的意义,其中“尾号五鬼”的磁场组合常常引发人们的关注。在数字能量学的认知体系里,“尾号五鬼”被视作一种带有负面能量的磁场组合,通常与不稳定、变化频繁、财…...
Spring with AI (3): 定制对话——Prompt模板引入
1 创建模板先在pom.xml引入验证Starter:<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>我们定义一个关于“世界各国地理历史知识”的AI&…...
当绩效开始算Token:AI时代打工人的新KPI
你的公司开始算Token了吗?最近,多家大厂传出消息:绩效考核开始和Token消耗挂钩。有的部门把Token额度作为「生产力指标」,有的甚至直接影响转正晋升。AI时代,打工人的KPI正在被重新定义。 为什么算Token?公…...
