97在线资源站,91视频专区,日韩欧美精品

在 Node.js 的 Express 框架上使用報(bào)告工具 Stimulsoft Reports.JS

翻譯|行業(yè)資訊|編輯：胡濤|2023-09-25 14:21:13.617|閱讀 95 次

概述：在本文中，我們將指導(dǎo)您在基于 Node.js Express 框架構(gòu)建的項(xiàng)目和應(yīng)用程序中使用我們的 JavaScript 報(bào)告編寫(xiě)器，歡迎查閱~

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

Stimulsoft Reports.JS 是一款強(qiáng)大的工具，用于在基于 Vue.js、React.js、Node.js 等框架的 Web 應(yīng)用程序中創(chuàng)建和顯示報(bào)告。在本文中，我們將指導(dǎo)您在基于 Node.js Express 框架構(gòu)建的項(xiàng)目和應(yīng)用程序中使用我們的 JavaScript 報(bào)告編寫(xiě)器。我們將提供有關(guān)如何使用它的分步指南，以及一些示例來(lái)幫助您開(kāi)始您的旅程。

Stimulsoft Reports官方正版下載

步驟 1. 項(xiàng)目設(shè)置

首先，您必須創(chuàng)建一個(gè)新的 Express.js 項(xiàng)目或使用現(xiàn)有的項(xiàng)目。通過(guò)在項(xiàng)目目錄中執(zhí)行以下命令來(lái)安裝所需的依賴項(xiàng)：

npm install stimulsoft-reports-js express

步驟 2. Express.js 服務(wù)器配置

接下來(lái)，在 Node.js 項(xiàng)目中創(chuàng)建一個(gè)新文件，例如，server.js并導(dǎo)入必要的模塊：

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

接下來(lái)，設(shè)置viewer.html頁(yè)面的路由：

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");
});

通過(guò)將以下代碼添加到文件末尾來(lái)啟動(dòng)服務(wù)器：

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

步驟 3. 創(chuàng)建查看器頁(yè)面

在項(xiàng)目目錄中生成一個(gè)新的 HTML 文件并將后續(xù)代碼附加到其中。這將合并必要的 Stimulsoft Reports.JS 庫(kù)并初始化查看器：

<!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. 創(chuàng)建報(bào)告模板

在目錄中創(chuàng)建一個(gè)新文件，例如SampleReport.mrt. 使用 Stimulsoft Designer 創(chuàng)建報(bào)告并將其另存為SampleReport.mrt.

步驟 5. 在查看器中顯示報(bào)告

接下來(lái)，設(shè)置加載報(bào)告模板并將其傳遞給查看器的路由：

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. 啟動(dòng)項(xiàng)目

通過(guò)運(yùn)行啟動(dòng)項(xiàng)目node server.js并在瀏覽器中訪問(wèn)//localhost:3000/reports以預(yù)覽頁(yè)面。將模板集成到項(xiàng)目中后，報(bào)告將在查看器中顯示。

報(bào)表設(shè)計(jì)器

為了使報(bào)表設(shè)計(jì)器能夠正常工作，您需要首先為文件建立路徑stimulsoft.designer.js，然后為designer.html頁(yè)面建立路徑。

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");
});

創(chuàng)建設(shè)計(jì)器頁(yè)面

工作流程保持一致 - 我們designer.html在項(xiàng)目目錄中生成一個(gè)新文件，例如。然后，我們將后續(xù)代碼合并到 HTML 文件中，以加載必要的 Stimulsoft Reports.JS 庫(kù)并初始化設(shè)計(jì)器：

<!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>

我們準(zhǔn)備了在 Express 框架上使用我們的和

本文將幫助您在 Express for Node.js 中配置 Stimulsoft Reports.JS，使您能夠有效地生成、編輯、查看和打印報(bào)告。我們的 JavaScript 報(bào)告工具使您能夠與任何網(wǎng)絡(luò)服務(wù)器協(xié)作；您只需配置 Web 服務(wù)器即可將 JS 腳本傳輸并隨后下載到瀏覽器。請(qǐng)記住設(shè)置路徑和文件名以與項(xiàng)目的特定設(shè)置保持一致。

以上便是如何借助Stimulsoft儀表盤(pán)的 SumIf 和 CountIf 函數(shù)進(jìn)行數(shù)據(jù)分析的介紹，如有其他問(wèn)題，歡迎私聊我們~

想要了解Stimulsoft Reports 報(bào)價(jià)信息的朋友，歡迎咨詢。

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

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn

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