将报表分配给Viewer、更改报表查看器主题和查看器中的全屏模式

【下载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);

示例代码的结果如下图所示。

查看本文，下载示例