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中,你可以使用类似的工具或…...
PX4飞控自定义Mavlink消息:实现UART传感器数据在QGC地面站的可视化
1. 为什么需要自定义Mavlink消息 在无人机开发中,我们经常需要将各种传感器数据实时传输到地面站进行监控和分析。PX4飞控虽然内置了丰富的标准Mavlink消息,但当我们接入一些特殊传感器时,标准消息往往无法满足需求。比如你想通过UART串口接入…...
SaaS Boilerplate支付集成终极方案:Stripe订阅管理与计费系统完整指南
SaaS Boilerplate支付集成终极方案:Stripe订阅管理与计费系统完整指南 【免费下载链接】saas-boilerplate SaaS Boilerplate - Open Source and free SaaS stack that lets you build SaaS products faster in React, Django and AWS. Focus on essential business …...
嵌入式工程师职业发展:原厂与方案商技术深度对比
1. 嵌入式工程师的职业抉择:原厂与方案商深度对比最近一位工作三年的嵌入式工程师朋友分享了他的求职经历,让我感触颇深。他在方案商做了三年应用开发后,最终选择跳槽到芯片原厂。这个决定背后,反映了很多嵌入式工程师都会面临的职…...
形式验证实战:5个降低状态空间复杂度的黑科技(附内存控制器案例)
形式验证实战:5个降低状态空间复杂度的黑科技(附内存控制器案例) 在芯片设计领域,形式验证(Formal Verification, FV)正逐渐成为确保设计正确性的重要手段。然而,随着设计复杂度的提升ÿ…...
UE5地牢生成实战:从零搭建程序化地下城(附完整蓝图逻辑)
UE5地牢生成实战:从零搭建程序化地下城(附完整蓝图逻辑) 在游戏开发中,程序化内容生成(PCG)技术正变得越来越重要。想象一下,你正在开发一款Roguelike游戏,每次玩家进入地牢都能获得全新的探索体验——这正…...
UE5 UMG坐标转换实战:用SlateBlueprintLibrary搞定UI拖拽与点击检测
UE5 UMG坐标转换实战:用SlateBlueprintLibrary搞定UI拖拽与点击检测 在虚幻引擎5的UMG开发中,精准控制UI元素的交互行为是提升用户体验的关键。想象一下,当玩家拖动一个自定义背包中的物品,或是点击复杂HUD中的某个区域时…...
告别环境冲突:基于快马平台与homebrew打造团队高效统一开发环境
作为一名长期与团队协作的开发者,我深刻体会到环境配置不一致带来的痛苦。新同事入职要花一整天配环境,不同项目依赖冲突导致"在我机器上能跑"的经典问题,甚至同一项目组因为系统更新节奏不同而出现隐性兼容问题。最近尝试用homebr…...
号令天下:守财数字能量号组413与313能守财吗
在数字能量学的体系中,延年磁场是主导守财的核心能量,天医磁场主打招财纳福,生气磁场侧重拓展人脉,二者并不具备直接的守财属性。像 413、313 这类组合,核心作用集中在招财聚财方面,守财能力相对薄弱&#…...
5 分钟搭建智能终端:自动补全 + 历史建议 + 语法高亮,效率拉满
文章目录 📖 介绍 📖 🏡 演示环境 🏡 📒 终端优化指南:补全、提示与高亮一步到位 📒 📝 实现效果与核心能力 📝 Windows 平台完整配置步骤 📝 Linux 平台完整配置步骤 📝 macOS(苹果)平台配置步骤 📝 各平台效果说明 ⚓️ 相关链接 ⚓️ 📖 介绍 �…...
网络基础面试题:简单谈谈你对CDN的理解?原理+流程图+通俗讲解
网络基础面试题:简单谈谈你对CDN的理解?原理流程图通俗讲解一、前言二、CDN 是什么?(一句话核心)三、为什么要用 CDN?四、CDN 工作流程图(最清晰)五、CDN 工作步骤(简单 …...
