如何在 Stimulsoft JavaScript 報表組件中，設置設計器與查看器主題風格

在現代軟件開發中，圖形用戶界面（GUI）不僅僅是功能的承載體，更是用戶體驗的關鍵組成部分。一個美觀、統一且具備高度可定制性的界面，能夠顯著提升系統的專業感和使用效率。

Stimulsoft 作為功能強大的報表和儀表板解決方案提供商，其 JavaScript 版本（Stimulsoft Reports.JS 與 Stimulsoft Dashboards.JS）為開發者提供了豐富的內置主題支持，助力快速構建符合品牌風格的交互界面。本文將圍繞報表設計器與查看器兩大核心組件，詳細介紹如何設置和動態更換主題樣式。

Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于創建報表和儀表板的通用工具集。該產品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他環境的完整工具集。無需比較產品功能，Stimulsoft Ultimate包含了所有內容！

Stimulsoft Reports.JS官方正版下載     Stimulsoft Dashboards.JS官方正版下載

一、如何設置查看器（Viewer）主題

在使用StiViewer組件時，可以通過StiViewerOptions類設置theme屬性，來指定默認主題樣式。若未指定，則系統默認使用Office2022WhiteBlue風格。

以下是通過代碼設置查看器主題為深色風格Office2022BlackBlue的示例：

let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022BlackBlue;

let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml();

執行后，報表查看器將以指定的深色主題進行渲染展示。

二、如何設置報表設計器（Designer）主題

與 Viewer 類似，StiDesigner組件也支持通過StiDesignerOptions來設置主題風格。下面示例展示了如何為設計器設置深色主題：

let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022BlackBlue;

let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml();

這樣，用戶在使用報表設計器時，將體驗到統一的深色界面風格，提升視覺一致性。

三、如何動態切換主題（運行時切換）

除了在初始化階段設置主題外，Stimulsoft 也支持運行時動態切換界面風格，非常適合需要根據用戶行為或配置調整樣式的場景。例如可通過按鈕、下拉框讓用戶自定義界面樣式：

viewer.applyTheme(StiViewerTheme.Office2022WhiteBlue);
designer.applyTheme(StiDesignerTheme.Office2022WhiteBlue);

這一特性為打造個性化或多皮膚系統提供了極大的靈活性。

四、在 React、Vue、Angular 框架中使用主題設置

Stimulsoft 全面支持主流前端框架，開發者在 React、Vue.js 和 Angular 項目中同樣可以設置或動態更改組件的主題風格。

官方文檔與示例提供了框架專屬的實現方式：

• React 示例：設置報表設計器與查看器主題

• Angular 示例：設置報表設計器與查看器主題

• Vue.js 示例：設置報表設計器與查看器主題

您可以通過慧都提供的示例代碼和技術支持快速上手。

結語：統一靈活的界面主題機制，提升項目整體體驗

Stimulsoft 報表與儀表板組件不僅功能全面、可視化強，還提供了跨框架、可定制的主題系統，幫助開發者輕松打造風格統一、體驗優良的前端界面。無論是在 JavaScript 原生項目，還是現代前端框架中，Stimulsoft 都能靈活應對不同的 UI 個性化需求。