报表生成工具Stimulsoft Reports.JS如何减少产品脚本的加载时间

news2024/10/5 14:22:05

Stimulsoft Reports 是一款报告编写器,主要用于在桌面和Web上从头开始创建任何复杂的报告。可以在大多数平台上轻松实现部署,如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等,在你的应用程序中嵌入报告设计器或在线创建报告,支持从云端快速分享你的报告。

Stimulsoft Reports.JS是一个使用JavaScript和HTML5的报表生成平台,它基于JavaScript和HTML5技术设计,包含创建,编辑,构建,查看和导出高复杂性报告所需的一切,无需安装浏览器扩展或框架,便可在任何JavaScript应用程序中使用。

Stimulsoft Reports.JS官方版下载(qun:740060302)icon-default.png?t=N3I4https://www.evget.com/resource/detail-download-22949

我们的 JavaScript 报告和仪表板应用程序包含一个在浏览器窗口中运行的组件,主要涉及在网页上加载脚本。在本文中,我们将分享有关如何优化产品脚本加载时间的实用技巧。

下面将展示一个示例以帮助您入门:

<title>Loading the Report</title>
<!-- Stimulsoft Reports.JS -->
<script src="/../scripts/stimulsoft.reports.js" type="text/javascript"></script>

<!-- Loading the Report -->
<script type="text/javascript">
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report
report.loadFile("../reports/SimpleList.mrt");
// Render report
report.renderAsync(function () {
document.write("Complete.<br>");
document.write("Rendered page count: " + report.renderedPages.count);
});
</script>

在此示例中,我们加载大小为 10 MB 的stimulsoft.reports.js脚本,并输出页数。但是,如此大的脚本会显着影响网页的加载时间。为解决此问题,推荐的解决方案是将大型脚本分成较小的部分,并仅加载必要的部分。例如:

<title>Loading the Report</title>
<!-- Stimulsoft Reports.JS -->
<script src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>

<!-- Loading the Report -->
<script type="text/javascript">
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report
report.loadFile("../reports/SimpleList.mrt");
// Render report
report.renderAsync(function () {
document.write("Complete.<br>");
document.write("Rendered page count: " + report.renderedPages.count);
});
</script>

在此示例中,我们仅加载所需的最少功能,该功能包含在stimulsoft.reports.engine文件中。此外,我们加载stimulsoft.reports.chart,它负责构建图表。

脚本有什么用?

  • stimulsoft.reports.engine.js - 所需的最小文件,大小 - 5.5 MB;
  • stimulsoft.reports.chart.js是一个包含在图表中显示数据的函数的脚本。如果您的报表没有提供图表的使用,则不需要加载脚本;
  • stimulsoft.reports.export.js是一个用于将报告导出为 PDF、MS Word 或 Excel 的脚本。如果您不打算将报表导出为指定格式,则无需添加该脚本;
  • stimulsoft.reports.import.xlsx.js是一个用于从 MS Excel 导入数据的脚本。因此,如果您使用来自其他类型来源的数据,它将对您没有用处;
  • stimulsoft.reports.maps.js是用于在报告中构建和显示地图组件的脚本;
  • stimulsoft.blockly.editor.js是 Blockly 编辑器的特殊脚本。如果您不使用此脚本,代码块本身将继续运行。

使用打包脚本

减少脚本加载时间的另一种选择是使用打包的stimulsoft.*.pack.js文件。这些文件之间的主要区别在于它们是打包的,因此体积更小,下载时间也更短。

加载后,脚本会自行解压,但解压它们可能需要一些时间。换句话说,打包文件的体积会显着降低,从而减少脚本加载网页所需的时间,但解包会花费额外的时间。

换句话说,您可以选择加载哪些脚本。如果网络连接快速可靠,那么最好使用非打包的脚本,在计算能力大的情况下,可以优先考虑打包文件。

异步脚本加载

减少脚本加载时间的另一种解决方案是使用脚本标签的异步属性。在这种情况下,JS 脚本的异步加载及其执行在后台进行,这反过来又允许您一次显示整个网页,而无需等待所有文件和脚本完全加载。一个异步加载JS脚本的例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Loading Scripts in Part to Minify Project</title>
<!-- Stimulsoft Reports.JS -->
<script async src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script async src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>
<script async src="/../scripts/stimulsoft.reports.export.js" type="text/javascript"></script>
<script async src="/../scripts/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
<script async src="/../scripts/stimulsoft.reports.maps.js" type="text/javascript"></script>
<script async src="/../scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>

<!-- Loading the Report -->
<script type="text/javascript">
function onLoad() {
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report
report.loadFile("../reports/SimpleList.mrt");
// Render report
report.renderAsync(function () {
document.write("Complete.<br>");
document.write("Rendered page count: " + report.renderedPages.count);
});
}
</script>
</head>
<body οnlοad="onLoad()">
<div id="content"></div>
</body>
</html>

以上便是如何减少 Reports.JS 和 Dashboards.JS 产品脚本的加载时间的全部内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/514587.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Django框架之视图HttpResponse 对象

本篇文章主要内容为&#xff1a;视图中HttpResponse对象的属性、方法及json、redirect子类包含使用cookie使用、跳转、json返回的示例。 概述 HttpResponse对象是对用户访问的响应&#xff0c;与HttpRequest对象由django创建&#xff0c;HttpResponse对象是由开发人员创建。Ht…

001+limou+MySQL的基础命令

0.前言 您好&#xff0c;这里是limou3434的一篇个人博文&#xff0c;感兴趣的话您也可以看看我的其他文章。本博文是借鉴于李小威前辈所著的书籍《SQL 基础教程》所成的博文笔记&#xff0c;这本书真的很适合新手学习数据库相关的内容。本次我想给您带来的是关于MySQL的一些基…

网站神奇工具Viewport Resizer,支持手机、pad和电脑等不同尺寸大小

标题&#xff1a;Viewport Resizer&#xff1a;让网站适应不同设备的神奇工具&#xff01; 导语&#xff1a; 在互联网世界中&#xff0c;我们常常需要在不同设备上浏览网站。为了让用户在手机、平板或电脑上都能看到美观易用的页面&#xff0c;网站开发者们努力优化网站的适应…

qemu-虚拟机

qemu 官网下载地址 https://www.qemu.org/ 跨平台虚拟机&#xff0c;类型vmware&#xff0c;执行效率比vmware高 官方参考文档&#xff1a;https://www.qemu.org/docs/master/system/introduction.html kvm&#xff0c;轻量级虚拟机&#xff0c;可以加速qemu的执行 qemu-e…

微信云开发技术架构

&#xff08;仅有把抱怨环境的情绪&#xff0c;化为上进的力量&#xff0c;才是成功的保证。——罗曼罗兰&#xff09; 微信云开发 官方文档 文本只用来概述微信云开发的技术架构&#xff0c;并结合实战场景进行说明。更详细的请直接查看微信官方文档。 背景 微信云开发是微…

Oracle11g全新讲解之游标

游标 游标的作用&#xff1a;处理多行数据&#xff0c;类似与java中的集合 1.隐式游标 一般是配合显示游标去使用的&#xff0c;不需要显示声明&#xff0c;打开&#xff0c;关闭&#xff0c;系统自定维护,名称为&#xff1a;sql 常用属性&#xff1a; sql%found:语句影响了…

快速分隔文件(split),合并文件(paste)的命令;eval(先扫描输出在执行)命令

split快速分割文件&#xff0c;paste快速合并文件&#xff1b;eval命令 split命令快速分隔文件paste命令快速合并文件eval命令 split命令快速分隔文件 语法格式&#xff1a; split 【选项】 参数 原始文件 拆分后文件名前缀 常用选项 -l&#xff1a;以行数拆分 -b&#xf…

7.对象模型

对象模型 信号和槽 信号和槽是一种用于对象之间通信的机制。信号是对象发出的通知&#xff0c;槽是用于接收这些通知的函数。 当对象的状态发生变化时[按钮被点击]&#xff0c;它会发出一个信号[clicked()]&#xff0c;然后与该对象连接的槽函数将被自动调用。 若某个信号与多…

图像分割之SAM(Segment Anything Model)

论文&#xff1a;Segment Anything Github&#xff1a;https://github.com/facebookresearch/segment-anything 论文从zero-shot主干网络的基础出发&#xff0c;提出了SAM&#xff08;Segment Anything Model&#xff09;模型。该模型有别于传统的分割模型。传统分割模型只能输…

正则表达式的一些元符号

正则表达式 正则表达式—通常用于判断语句中&#xff0c;用来检查某一字符串是否满足某一格式 正则表达式是由普通字符与元字符组成 普通字符包括大小写字母、数字、标点符号及一些其他符号元字符是指在正则表达式中具有特殊意义的专用字符&#xff0c;可以用来规定其前导字…

(数字图像处理MATLAB+Python)第四节:频域高通滤波与综合案例

文章目录 一&#xff1a;频域高通滤波&#xff08;1&#xff09;理想的高通滤波器&#xff08;2&#xff09;巴特沃斯高通滤波器&#xff08;3&#xff09;指数高通滤波器&#xff08;4&#xff09;梯形高通滤波器 二&#xff1a;综合案例——人像美化&#xff08;1&#xff09…

vue2实现高德地图 JSAPI 2.0海量点标记(标注和标注图层)->自定义点位->定时刷新点位

前提: 需要注册高德开放平台,之后创建应用并且开通Web端(JS API)平台,然后拿到securityJsCode和key 1. 基础抽取(还原示例) 1.1 组件代码 代码说明: 需要修改securityJsCode和key为自己的allowCollision为标注是否避让marker,默认为false不避让markers为地图上的标记数组layer…

【Axure教程】中继器表格寻找和标记数据

在系统表格中&#xff0c;我们想在表格中快速找到对应的数据&#xff0c;通常我们会用条件筛选来完成&#xff0c;但是用筛选的方式&#xff0c;其他数据就看不到了&#xff0c;少了两种条件之间的对比。所以如果需要数据对比的情况下&#xff0c;我们更多的是用标记数据的方式…

Unity学习笔记 关于Unity相机的FOV以及水平FOV和垂直FOV之间的转换

前言 关于FOV FOV 是在任何给定时间通过人眼、相机取景器或在显示屏上可见的可观察世界的范围。它指的是整个区域的覆盖范围&#xff0c;而不是单个固定焦点。FOV 还描述了一个人可以看到可见世界的角度。 FOV 越宽&#xff0c;可以看到的可观察世界就越多。它是水平、垂直和对…

vue3中使用外部字体

首先要找一个免费网站&#xff0c;去下载你想用的字体&#xff0c;推荐 DaFont - Download fonts 或者问UI要&#xff0c;ui在设计图的时候也会下载对应的特殊字体的包&#xff0c;所以问她要方便快捷 ~~ 如果是进入网站下载的话&#xff0c;操作步骤如下&#xff1a; 在官网…

MTN模型LOSS均衡相关论文解读

一、综述 MTN模型主要用于两个方面&#xff0c;1.将多个模型合为一个显著降低车载芯片负载。2.将多个任务模型合为一个&#xff0c;有助于不同模型在共享层的特征可以进行互补&#xff0c;提高模型泛化性能的同时&#xff0c;也有可能提高指标。传统的方法是直接不同任务loss相…

谷歌打响全面反击战!官宣AI重构搜索、新模型比肩GPT-4,朝着ChatGPT微软开炮

明敏 丰色 发自 凹非寺 量子位 | 公众号 QbitAI 万众瞩目&#xff0c;谷歌的反击来了。 现在&#xff0c;谷歌搜索终于要加入AI对话功能了&#xff0c;排队通道已经开放。 当然这还只是第一步。 大的还在后面&#xff1a; 全新大语言模型PaLM 2正式亮相&#xff0c;谷歌声称…

vue解决跨域的几种办法

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时&#xff0c;那说明跨域了。 跨域是因为浏览器的同源策略所导致&#xff0c;同源策略&#xff08;Same origin policy&#xff09;是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;同源是指&…

【C#】本地下载附件(Excel模板)

系列文章 【C#】单号生成器&#xff08;编号规则、固定字符、流水号、产生业务单号&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器&#xff08;开始日期、结束日期&#xff09; 本文链接&#xff1a;h…

腾讯云发布金融国产化战略、《腾讯云银行核心系统分布式转型白皮书》

5月11日&#xff0c;在腾讯金融云国产化战略峰会上&#xff0c;腾讯云发布金融国产化战略&#xff1a;腾讯云将持续加大技术投入打造新一代国产化精品产品&#xff0c;并依托产品构建全栈领先的国产数字化基座。同时&#xff0c;腾讯云还将携手伙伴&#xff0c;共同构建国产数字…