在 Node.js 的 Express 框架上使用报告工具 Stimulsoft Reports.JS-控件新闻-慧都网

在 Node.js 的 Express 框架上使用报告工具 Stimulsoft Reports.JS

翻译|行业资讯|编辑：胡涛|2023-09-25 14:21:13.617|阅读 62 次

概述：在本文中，我们将指导您在基于 Node.js Express 框架构建的项目和应用程序中使用我们的 JavaScript 报告编写器，欢迎查阅~

Stimulsoft Reports.JS 是一款强大的工具，用于在基于 Vue.js、React.js、Node.js 等框架的 Web 应用程序中创建和显示报告。在本文中，我们将指导您在基于 Node.js Express 框架构建的项目和应用程序中使用我们的 JavaScript 报告编写器。我们将提供有关如何使用它的分步指南，以及一些示例来帮助您开始您的旅程。

Stimulsoft Reports官方正版下载

步骤 1. 项目设置

首先，您必须创建一个新的 Express.js 项目或使用现有的项目。通过在项目目录中执行以下命令来安装所需的依赖项：

npm install stimulsoft-reports-js express

步骤 2. Express.js 服务器配置

接下来，在 Node.js 项目中创建一个新文件，例如，server.js并导入必要的模块：

const express = require('express');
const app = express();
const port = 3000; // - any port.

接下来，设置viewer.html页面的路由：

app.get('/viewer', (req, res) => {
res.sendFile(__dirname + '/viewer.html');
});

app.get('/stimulsoft.reports.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.reports.js");
});

app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js");
});

通过将以下代码添加到文件末尾来启动服务器：

app.listen(port, () => {
console.log(`Server running on port ${port}`);
});

步骤 3. 创建查看器页面

在项目目录中生成一个新的 HTML 文件并将后续代码附加到其中。这将合并必要的 Stimulsoft Reports.JS 库并初始化查看器：

<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Viewer</title>
<script src="/stimulsoft.reports.js"></script>
<script src="/stimulsoft.viewer.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var options = new Stimulsoft.Viewer.StiViewerOptions();
var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml("viewer");
</script>
</body>
</html>

步骤 4. 创建报告模板

在目录中创建一个新文件，例如SampleReport.mrt. 使用 Stimulsoft Designer 创建报告并将其另存为SampleReport.mrt.

步骤 5. 在查看器中显示报告

接下来，设置加载报告模板并将其传递给查看器的路由：

app.get('/report', (req, res) => {
res.sendFile(__dirname + '/SampleReport.mrt');
});

然后将代码添加到viewer.html：

var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
viewer.report = report;

步骤 6. 启动项目

通过运行启动项目node server.js并在浏览器中访问http://localhost:3000/reports以预览页面。将模板集成到项目中后，报告将在查看器中显示。

报表设计器

为了使报表设计器能够正常工作，您需要首先为文件建立路径stimulsoft.designer.js，然后为designer.html页面建立路径。

app.get('/designer', (req, res) => {
res.sendFile(__dirname + '/designer.html');
});

app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.designer.js");
});

创建设计器页面

工作流程保持一致 - 我们designer.html在项目目录中生成一个新文件，例如。然后，我们将后续代码合并到 HTML 文件中，以加载必要的 Stimulsoft Reports.JS 库并初始化设计器：

<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Designer</title>
<script src="/stimulsoft.reports.js"></script>
<script src="/stimulsoft.viewer.js"></script>
<script src="/stimulsoft.designer.js"></script>
</head>
<body>
<div id="designer"></div>
<script>
var options = new Stimulsoft.Designer.StiDesignerOptions();
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml("designer");

var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
designer.report = report;
</script>
</body>
</html>

我们准备了在 Express 框架上使用我们的报告产品和仪表板的示例。

本文将帮助您在 Express for Node.js 中配置 Stimulsoft Reports.JS，使您能够有效地生成、编辑、查看和打印报告。我们的 JavaScript 报告工具使您能够与任何网络服务器协作；您只需配置 Web 服务器即可将 JS 脚本传输并随后下载到浏览器。请记住设置路径和文件名以与项目的特定设置保持一致。

以上便是如何借助Stimulsoft仪表盘的 SumIf 和 CountIf 函数进行数据分析的介绍，如有其他问题，欢迎私聊我们~

想要了解Stimulsoft Reports 报价信息的朋友，欢迎咨询慧都官方客服。

加入官方社群 740060302，欢迎相互交流

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：界面组件DevExpress WPF v23.2新功能预览 - 更轻量级的主题下一篇：纯干货！5 种在 C# .NET 检索电子邮件的有效方法