将报表分配给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);
示例代码的结果如下图所示。