Wijmo 5

ReportViewer 101

此页面显示如何开始使用Wijmo的ReportViewer控件。

入门

在JavaScript应用程序中开始使用ReportViewer控件的步骤：

  1. 设置C1 Web API Report Services。请参考How to Set Up C1 Web API Report Services.
  2. 添加对Wijmo的引用。
  3. 添加标记作为Wijmo控件的容器。
  4. 通过JavaScript初始化Wijmo控件。
  5. （可选）添加一些CSS以自定义报表查看器控件的外观。

C1 Web API Report Services使用C1FlexReport呈现和导出报表. 请参考How to Set Up C1 Web API Report Services获取更多信息。

要从C1 Web API Report Services显示FlexReport的内容，请设置以下基本属性：

  1. serviceUrl: C1 Web API 报表服务的URL。 比如 ''.
  2. filePath:服务器上FlexReport定义的报表文件的全路径。 比如：'ReportsRoot/Formatting/AlternateBackground.flxr'.

    “ReportsRoot”是在服务器上注册以查找指定报表的报表提供程序的键。
    “Formatting/AlternateBackground.flxr”是FlexReport定义文件的相对路径，它可以被报表提供者定位。

  3. reportName: 在FlexReport定义文件中定义的报告名称。 比如'AlternateBackground',在AlternateBackground.flxr文件中将报表命名为'AlternateBackground'.

结果：


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.grid.js" type="text/javascript"></script> <script src="scripts/wijmo.viewer.js" type="text/javascript"></script> </head> <body> <!-- ReportViewer --> <div id="introReportViewer"></div> </body> </html>
// create controls var viewer = new wijmo.viewer.ReportViewer('#introReportViewer'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground';
.wj-viewer{ width: 100%; height: 600px; }

SSRS报表

ReportViewer控件也可以显示SSRS报表。

C1 Web API Report Services使用C1SSRSDocumentSource以连接SSRS服务器并呈现SSRS报表。 它首先从SSRS服务器获取数据，然后转换为预期的格式（通常为HTML5 SVG）。 请看How to Set Up C1 Web API Report Services获取更多的细节。

要从C1 Web API Report Services显示SSRS报表的内容，请设置以下基本属性：

  1. serviceUrl: C1 Web API 报表服务的URL， 比如 ''.
  2. filePath: 服务器上SSRS报表的完整路径。 比如, 'c1ssrs/AdventureWorks/Company Sales'.

    “c1ssrs”是在服务器上注册以查找指定报表的报表提供程序的键。 (对于 '', 'c1ssrs'是链接到SSRS服务器的报表提供程序的键 'http://ssrs.componentone.com:8000/ReportServer'.)
    'AdventureWorks/Company Sales'是可以位SSRS服务器中的报表的完整路径。

结果：


<div id="ssrsReportViewer"></div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#ssrsReportViewer'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'c1ssrs/AdventureWorks/Company Sales';
.wj-viewer{ width: 100%; height: 600px; }

基本功能

ReportViewer控件具有以下四个基本属性，允许您自定义其外观和行为：

下面的示例允许您查看更改这些属性时会发生什么。

结果：



<div class="row"> <h4>Result (live):</h4> <div id="basicReportViewer"></div> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicContinuousViewMode" type="checkbox" /> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicSelectMouseMode" type="checkbox" /> Select Mouse Mode? </label> </div> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="basicFullScreen" type="checkbox" /> Full Screen? </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">Zoom Factor</label> <div class="col-md-2"> <input id="basicZoomFactor" type="text" /> </div> </div> </div> </div> </div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#basicReportViewer'), fullScreen = document.getElementById('basicFullScreen'), selectMouseMode = document.getElementById('basicSelectMouseMode'), zoomFactor = new wijmo.input.InputNumber('#basicZoomFactor'), continuousViewMode = document.getElementById('basicContinuousViewMode'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground'; // fullScreen fullScreen.checked = viewer.fullScreen; fullScreen.addEventListener('change', function () { viewer.fullScreen = this.checked; }); // selectMouseMode selectMouseMode.checked = viewer.selectMouseMode; selectMouseMode.addEventListener('change', function () { viewer.selectMouseMode = this.checked; }); // continousViewMode continuousViewMode.checked = viewer.viewMode == wijmo.viewer.ViewMode.Continuous; continuousViewMode.addEventListener('change', function () { viewer.viewMode = this.checked ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single; }); // zoomFactor - initialize InputNumber's properties zoomFactor.min = 0.05; zoomFactor.max = 10; zoomFactor.step = 0.1; zoomFactor.format = 'n2'; zoomFactor.value = viewer.zoomFactor; zoomFactor.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } viewer.zoomFactor = sender.value; });
.wj-viewer{ width: 100%; height: 600px; }

报表名称

如果filePath和reportName属性被修改，ReportViewer将再次呈现报表。

结果：



<div id="namesReportViewer"></div> <br /> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Report Path</label> <div class="col-md-9"> <select id="namesReportPath"> <option value="ReportsRoot/Formatting/AlternateBackground.flxr/AlternateBackground">Alternating Background</option> <option value="ReportsRoot/Controls/AllCharts.flxr/AllCharts">All Charts</option> <option value="ReportsRoot/Controls/CheckBox.flxr/CheckBox">Check Box</option> <option value="ReportsRoot/Controls/Shapes.flxr/Shapes">Shapes</option> </select> </div> </div> </div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#namesReportViewer'), namesReportPath = new wijmo.input.ComboBox('#namesReportPath'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground'; // names report path namesReportPath.selectedIndex = 0; namesReportPath.selectedIndexChanged.addHandler(function (sender, args) { if (!sender.selectedValue) return; var reportPath = sender.selectedValue; var index = reportPath.lastIndexOf('/'); var filePath = reportPath.substr(0, index); var reportName = reportPath.substr(index + 1); viewer.filePath = filePath; viewer.reportName = reportName; });
.wj-viewer{ width: 100%; height: 600px; }