【下載Stimulsoft Reports.JS最新版本】

（一）將報表分配給Viewer

此示例顯示如何加載報表并將其分配給查看器，創建StiReport 類型的報表對象 ，然后通過調用loadFile（）方法加載報表模板文件 。要在查看器中顯示報表，將報表對象分配給查看者的報表屬性即可。如果未呈現報表，則查看器會自動呈現它：

// Create the report viewer with default options
var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report from url
report.loadFile("../reports/SimpleList.mrt");
// Assign report to the viewer, the report will be built automatically after rendering the viewer
viewer.report = report;

示例代碼的結果如下圖所示。

（二）更改報表查看器主題

此示例顯示如何更改查看器默認主題。將head部分中主題的CSS文件替換為另一個可用主題，可用于超過15個 就緒主題，還可以根據需要調整CSS文件。例如，將Office2007 Blue主題應用于查看器：

<!-- Report viewer Office2007 Blue style -->
<link href="../css/stimulsoft.viewer.office2007.blue.css" rel="stylesheet">

示例代碼的結果如下圖所示。

（三）查看器中的全屏模式

此示例顯示如何在默認情況下以全屏模式顯示報表查看器，在全屏模式下，查看器將顯示在瀏覽器窗口的所有可用區域中。此外，要切換此模式，使用查看器工具欄上的全屏閱讀按鈕。要在默認情況下啟用此模式，您需要在StiViewerOptions對象中設置fullScreenMode選項。例如，還設置為啟用scrollbarsMode選項，此選項允許在查看器內使用內置報表窗口：

// Set full screen mode for the viewer
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.scrollbarsMode = true;
options.appearance.fullScreenMode = true;
 
// Create the report viewer with specified options
var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);

示例代碼的結果如下圖所示。