欧美在线一级精品,久久久WWW成人免费精品,国产在线精品一区二区三区直

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

翻譯|行業資訊|編輯：胡濤|2023-09-25 14:21:13.617|閱讀 88 次

概述：在本文中，我們將指導您在基于 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并在瀏覽器中訪問//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@fc6vip.cn

上一篇：界面組件DevExpress WPF v23.2新功能預覽 - 更輕量級的主題下一篇：純干貨！5 種在 C# .NET 檢索電子郵件的有效方法