HTML报告查看器

主题:

使用ReportViewer查看Web应用程序中的报告，ReportViewer是一个轻量级查看器，用于显示ActiveReports或ComponentOne FlexReport的报告。

包括顶级文档查看器功能，如缩略图显示，滚动，分页和缩放
完整的打印和页面设置支持
导出功能

特征

ReportViewer允许您的用户在Web或混合移动应用程序中显示生成的报告。

您希望从文档查看器中获得的每个功能都包含在开箱即用中：

打印和页面设置支持
响应的观众
缩略图
搜索
分页
文件地图
全屏和调整大小选项
连续滚动选项

基本

要在Wijmo ReportViewer控件中显示报表内容，请设置以下属性：

serviceUrl报告服务的URL。
filePath服务器上FlexReport定义文件，SSRS报告或ActiveReports报告的完整路径。
reportName（仅适用于FlexReport）FlexReport定义文件中定义的报告名称。

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

fullScreen：表示查看器是否处于全屏模式。
mouseMode：表示鼠标行为。
viewMode：表示如何显示文档页面。
zoomFactor：表示显示文档页面的当前缩放系数。

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

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as viewer from '@grapecity/wijmo.viewer'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let reportViewer = new viewer.ReportViewer('#reportViewer', { serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report', filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr', reportName: 'AlternateBackground', zoomFactorChanged: (sender) => { zoomFactor.value = sender.zoomFactor; } }); // document.querySelector('#cbContinuousViewMode').addEventListener('click', (e) => { reportViewer.viewMode = e.target.checked ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; }); // let mouseMode = new input.Menu('#lbMouseMode', { itemClicked: (sender) => { reportViewer.mouseMode = sender.selectedValue; updateMenuHeader(sender, 'Mouse Mode'); } }); updateMenuHeader(mouseMode, 'Mouse Mode'); // document.querySelector('#cbFullScreen').addEventListener('click', e => { reportViewer.fullScreen = e.target.checked; }); // let zoomFactor = new input.InputNumber('#txtZoomFactor', { min: 0.05, max: 10, step: 0.1, format: 'n2', value: reportViewer.zoomFactor, valueChanged: (sender) => { if (sender.value >= sender.min && sender.value <= sender.max) { reportViewer.zoomFactor = sender.value; } } }); // // function updateMenuHeader(menu, header) { menu.header = header + ': <b>' + menu.text + '</b>'; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <div id="reportViewer"></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="cbContinuousViewMode" type="checkbox" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <select id="lbMouseMode"> <option value="SelectTool" selected>SelectTool</option> <option value="MoveTool">MoveTool</option> <option value="RubberbandTool">RubberbandTool</option> <option value="MagnifierTool">MagnifierTool</option> </select> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="cbFullScreen" 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="txtZoomFactor" /> </div> </div> </div> </div> </div> </div> </div> </body> </html> body { margin-bottom: 24px; } .wj-viewer { width: 100%; display: block; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as viewer from '@grapecity/wijmo.viewer'; // import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjViewerModule } from '@grapecity/wijmo.angular2.viewer'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('reportViewer') reportViewer: viewer.ReportViewer; // get continuousViewMode(): boolean { return this.reportViewer.viewMode === viewer.ViewMode.Continuous; } set continuousViewMode(value: boolean) { this.reportViewer.viewMode = value ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; } } // @NgModule({ imports: [WjInputModule, WjViewerModule, BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script>  <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <wj-report-viewer #reportViewer [serviceUrl]="'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'" [filePath]="'ReportsRoot/Formatting/AlternateBackground.flxr'" [reportName]="'AlternateBackground'"> </wj-report-viewer> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" [(ngModel)]="continuousViewMode" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <wj-menu [(value)]="reportViewer.mouseMode" [header]="'Mouse Mode'"> <wj-menu-item [value]="0">SelectTool</wj-menu-item> <wj-menu-item [value]="1">MoveTool</wj-menu-item> <wj-menu-item [value]="2">RubberbandTool</wj-menu-item> <wj-menu-item [value]="3">MagnifierTool</wj-menu-item> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" [(ngModel)]="reportViewer.fullScreen" /> 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"> <wj-input-number [(value)]="reportViewer.zoomFactor" [min]="0.05" [max]="10" [step]=".1" [format]="'n2'"> </wj-input-number> </div> </div> </div> </div> </div> </div> </div> body { margin-bottom: 24px; } .wj-viewer { width: 100%; display: block; } <template> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <wj-report-viewer serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report" filePath="ReportsRoot/Formatting/AlternateBackground.flxr" reportName="AlternateBackground" :viewMode="viewMode" :mouseMode="mouseMode" :fullScreen="fullScreen" :zoomFactor="zoomFactor" :viewModeChanged="viewModeChanged" :fullScreenChanged="fullScreenChanged" :zoomFactorChanged="zoomFactorChanged"> </wj-report-viewer> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" v-model="continuousViewMode" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <wj-menu :header="'Mouse Mode: <b>' + mouseMode + '</b>'" :itemsSource="mouseModeOptions" :selectedIndexChanged="mouseModeChanged"> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" v-model="fullScreen" /> 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"> <wj-input-number :value="zoomFactor" :min=0.05 :max=10 :step=0.1 format="n2" :valueChanged="zoomFactorValueChanged"> </wj-input-number> </div> </div> </div> </div> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import * as viewer from '@grapecity/wijmo.viewer'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.viewer'; // new Vue({ el: '#app', data: { viewMode: viewer.ViewMode.Single, mouseMode: 'SelectTool', mouseModeOptions: ['SelectTool', 'MoveTool', 'RubberbandTool', 'MagnifierTool'], fullScreen: false, zoomFactor: 1 }, computed: { continuousViewMode: { get() { return this.viewMode; }, set(value) { this.viewMode = value ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; } } }, methods: { viewModeChanged(sender) { this.viewMode = sender.viewMode; }, mouseModeChanged(sender) { if (sender.selectedItem) { this.mouseMode = sender.selectedItem; } }, fullScreenChanged(sender) { this.fullScreen = sender.fullScreen; }, zoomFactorChanged(sender) { this.zoomFactor = sender.zoomFactor; }, zoomFactorValueChanged(sender) { this.zoomFactor = sender.value; } } }); </script> <style> body { margin-bottom: 24px; } .container-fluid .wj-viewer { width: 100%; display: block; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as viewer from '@grapecity/wijmo.viewer'; import * as wjViewer from '@grapecity/wijmo.react.viewer'; import * as wjInput from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.state = { viewMode: viewer.ViewMode.Single, mouseMode: "SelectTool", mouseModeOptions: ['SelectTool', 'MoveTool', 'RubberbandTool', 'MagnifierTool'], fullScreen: false, zoomFactor: 1 }; } render() { return <div className="container-fluid"> <div className="col-md-12"> <div className="row"> <wjViewer.ReportViewer filePath="ReportsRoot/Formatting/AlternateBackground.flxr" reportName="AlternateBackground" viewMode={this.state.viewMode} mouseMode={this.state.mouseMode} fullScreen={this.state.fullScreen} zoomFactor={this.state.zoomFactor} viewModeChanged={this.viewModeChanged.bind(this)} fullScreenChanged={this.fullScreenChanged.bind(this)} zoomFactorChanged={this.zoomFactorChanged.bind(this)} serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report"> </wjViewer.ReportViewer> </div> <br /> <div className="row"> <div className="form-horizontal"> <div className="form-group"> <div className="col-md-3"> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.viewMode} onChange={this.viewModeCheckedChanged.bind(this)}/> Continuous View Mode </label> </div> </div> <div className="col-md-3"> <label> MouseMode <wjInput.ComboBox id="mouseModeMenu" itemsSource={this.state.mouseModeOptions} text={this.state.mouseMode} textChanged={this.mouseModeTextChanged.bind(this)}> </wjInput.ComboBox> </label> </div> <div className="col-md-2"> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.fullScreen} onChange={this.fullScreenCheckedChanged.bind(this)}/> Full Screen </label> </div> </div> <div className="col-mod-4"> <label className="col-md-2 control-label">Zoom Factor</label> <div className="col-md-2"> <wjInput.InputNumber value={this.state.zoomFactor} min={0.05} max={10} step={0.1} format="n2" valueChanged={this.zoomFactorValueChanged.bind(this)}> </wjInput.InputNumber> </div> </div> </div> </div> </div> </div> </div>; } viewModeChanged(sender) { this.setState({ viewMode: sender.viewMode }); } viewModeCheckedChanged() { if (this.state.viewMode === viewer.ViewMode.Single) { this.setState({ viewMode: viewer.ViewMode.Continuous }); } else { this.setState({ viewMode: viewer.ViewMode.Single }); } } mouseModeTextChanged(sender) { this.setState({ mouseMode: sender.text }); } fullScreenChanged(sender) { this.setState({ fullScreen: sender.fullScreen }); } fullScreenCheckedChanged() { this.setState({ fullScreen: !this.state.fullScreen }); } zoomFactorChanged(sender) { this.setState({ zoomFactor: sender.zoomFactor }); } zoomFactorValueChanged(sender) { this.setState({ zoomFactor: sender.value }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column DataMaps</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } .container-fluid .wj-viewer { width: 100%; display: block; }