当前位置: 首页 > news >正文

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&#xff0c;试验过积木报表&#xff08;web界面类型的&#xff09;、JasperReport&#xff08;.jasper报表文件&#xff09;、stimulsoft web版本&#xff08;.mrt报表文件&#xff09; 我们的项目是前后端分离的&#xff0c;用积木报表&#xff08;开箱即…...

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. 汉诺塔问题题干&#xff1a;算法原理&#xff1a;代码&#xff1a; 2. 合并两个有序链表题干&#xff1a;算法原理&#xff1a;代码&#xff1a; 3. 反转链表题干&#xff1a;算法原理&#xff1a;代码&#xff1a; 4. 最大子数组和题干&#xff1a;算法原理&#…...

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进行工作的时候&#xff0c;可以集成第三方的编辑器进行源文件编辑工作 2、 问题场景 用于解决在GHS中进行项目开发时&#xff0c;对于GHS的编辑器使用不习惯&#xff0c;想要切换到其他第三方的编辑…...

【Flutter】 search_page使用心得

https://pub.dev/packages/search_page 以上就是search_page地址。使用方法跟具有哪些功能网页都有&#xff0c;这篇文章主要讲我在使用这个插件时遇到的坑。 坑1&#xff1a;不能自己刷新界面 我在search_page中传入的builder是带有checkbox的ListTile&#xff0c;当我点击…...

前端Vue列表组件 list组件:实现高效数据展示与交互

前端Vue列表组件 list组件&#xff1a;实现高效数据展示与交互 摘要&#xff1a;在前端开发中&#xff0c;列表组件是展示数据的重要手段。本文将介绍如何使用Vue.js构建一个高效、可复用的列表组件&#xff0c;并探讨其在实际项目中的应用。 效果图如下&#xff1a; 一、引言…...

每日OJ题_哈希表⑤_力扣49. 字母异位词分组

目录 力扣49. 字母异位词分组 解析代码 力扣49. 字母异位词分组 49. 字母异位词分组 难度 中等 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入…...

【Linux】-Linux下的软件商店yum工具介绍(linux和windows互传文件仅仅一个拖拽搞定!!!!)

目录 1.Linux 软件包管理器yum 1.1快速认识yum 1.2 yumz下载方式&#xff08;如何使用yum进行下载&#xff0c;注意下载一定要是root用户或者白名单用户&#xff08;可提权&#xff09;&#xff09; 1.2.1下载小工具rzsz 1.2.2 rzsz使用 1.2.2查看软件包 1.3软件的卸载 2.yum生…...

320: 鸡兔同笼(python)

题目描述 一个笼子里关了鸡和兔&#xff08;鸡有2只脚&#xff0c;兔又4只脚&#xff0c;没有例外&#xff09;。已知笼子里面脚的总数a&#xff0c;问笼子里面至少有多少只动物&#xff0c;至多有多少只动物&#xff1f; 输入 多组测试数据。第一行是测试数据的组数n&#…...

CentOS 8启动流程

一、BIOS与UEFI BIOS Basic Input Output System的缩写,翻译过来就是“基本输入输出系统”,是一种业界标准的固件接口,第一次出现在1975年,是计算机启动时加载的第一个程序,主要功能是检测和设置计算机硬件,引导系统启动。 UEFI Unified Extensible Firmware interfac…...

js【详解】原型 vs 原型链

原型 每个 class 都有显示原型 prototype每个实例都有隐式原型_proto_实例的_proto_指向对应 class 的 prototype 如下范例&#xff1a; class Student 创建了 实例 xialuo 获取属性 xialuo.name 或执行方法 xialuo.sayhi()时&#xff0c;先在自身属性和方法寻找&#xff0…...

贪心算法: 奶牛做题

5289. 奶牛做题 - AcWing题库 贝茜正在参加一场奶牛智力竞赛。 赛事方给每位选手发放 n 张试卷。 每张试卷包含 k 道题目&#xff0c;编号 1∼k。 已知&#xff0c;不同卷子上的相同编号题目的难度相同&#xff0c;解题时间也相同。 其中&#xff0c;解决第 i 道题&#xff08;…...

go语言tcp协议实现文件上传

一、客户端实现方案&#xff1a; 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特性在菜单栏添加选项按钮 特性名&#xff1a;MenuItem 命名空间&#xff1a;UnityEditor 要求&#xff1a;一定是静态方法&#xff1b;新建的这个菜单栏按钮 必须有至少一个斜杠 不然会报错 它不支持只有一个菜单…...

做伦敦银要等怎样的价格与行情?

对于不同的伦敦银投资者来说&#xff0c;合适的入市价格和好的行情机会&#xff0c;标准可能并不一样&#xff0c;因为不同人有不同的交易策略、风险偏好和盈利目标。对于喜欢做趋势跟踪的投资者来说&#xff0c;一波明显而持续的上涨或下跌趋势&#xff0c;可能就是最好的行情…...

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 默认选项&#xff0c;不返回精准匹配到的分词结果 "suggest_mode":"popular" popular 大于等于搜索词频率的返回 "suggest_mode":"always", 不做任何限制&qu…...

Linux纯命令行查看文本文件

处理超大文本文件时&#xff0c;你可能希望避免一次性加载整个文件&#xff0c;这可能会耗尽内存资源。以下是一些在命令行中查看大文本文件的方法&#xff0c;它们适用于Linux和Unix系统&#xff0c;包括Mac OS X&#xff0c;而在Windows中&#xff0c;你可以使用类似的工具或…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...