レポートビューワー

ReportViewerを使用すると、ユーザーはWebまたはハイブリッドモバイルアプリで生成されたレポートを表示できます。ReportViewerコントロールは、FlexReport、SSRS、ActiveReportsのレポートを表示できます。以下の例では、fullScreenmouseModeviewMode、および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://demo.grapecity.com/activereports/ar12reportservice/ActiveReports.ReportService.asmx', filePath: 'Estimate.rdlx', 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, 'マウスモード'); } }); updateMenuHeader(mouseMode, 'マウスモード'); // 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"> <!-- SystemJS --> <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" /> 連続ビューモード </label> </div> </div> <div class="col-md-3"> <select id="lbMouseMode"> <option value="SelectTool" selected>選択ツール</option> <option value="MoveTool">移動ツール</option> <option value="RubberbandTool">ズームツール</option> <option value="MagnifierTool">拡大鏡ツール</option> </select> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="cbFullScreen" type="checkbox" /> フルスクリーン </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">ズーム率</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"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <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://demo.grapecity.com/activereports/ar12reportservice/ActiveReports.ReportService.asmx'" [filePath]="'Estimate.rdlx'"> </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" /> 連続ビューモード </label> </div> </div> <div class="col-md-3"> <wj-menu [(value)]="reportViewer.mouseMode" [header]="'マウスモード'"> <wj-menu-item [value]="0">選択ツール</wj-menu-item> <wj-menu-item [value]="1">移動ツール</wj-menu-item> <wj-menu-item [value]="2">ズームツール</wj-menu-item> <wj-menu-item [value]="3">拡大鏡ツール</wj-menu-item> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" [(ngModel)]="reportViewer.fullScreen" /> フルスクリーン </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">ズーム率</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; } 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 wjInput from '@grapecity/wijmo.react.input'; import * as wjViewer from '@grapecity/wijmo.react.viewer'; // class App extends React.Component { constructor(props) { super(props); // this.state = { viewMode: viewer.ViewMode.Single, mouseMode: viewer.MouseMode.SelectTool, fullScreen: false, zoomFactor: 1 }; } // render() { return <div className="container-fluid"> <div className="col-md-12"> <div className="row"> <wjViewer.ReportViewer filePath="Estimate.rdlx" 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://demo.grapecity.com/activereports/ar12reportservice/ActiveReports.ReportService.asmx"> </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)}/> 連続ビューモード </label> </div> </div> <div className="col-md-3"> <wjInput.Menu header='マウスモード' value={this.state.mouseMode} itemClicked={this.mouseModeChanged.bind(this)}> <wjInput.MenuItem value={viewer.MouseMode.SelectTool}> 選択ツール </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.MoveTool}> 移動ツール </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.RubberbandTool}> ズームツール </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.MagnifierTool}> 拡大鏡ツール </wjInput.MenuItem> </wjInput.Menu> </div> <div className="col-md-2"> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.fullScreen} onChange={this.fullScreenCheckedChanged.bind(this)}/> フルスクリーン </label> </div> </div> <div className="col-mod-4"> <label className="col-md-2 control-label">ズーム率</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 }); } } // mouseModeChanged(sender) { this.setState({ mouseMode: sender.selectedValue }); } // 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"> <!-- SystemJS --> <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; } <template> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <wj-report-viewer serviceUrl="https://demo.grapecity.com/activereports/ar12reportservice/ActiveReports.ReportService.asmx" filePath="Estimate.rdlx" :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" /> 連続ビューモード </label> </div> </div> <div class="col-md-3"> <wj-menu :value="mouseMode" :header="'マウスモード'" :itemClicked="mouseModeChanged"> <wj-menu-item :value="mouseModes.SelectTool"> 選択ツール </wj-menu-item> <wj-menu-item :value="mouseModes.MoveTool"> 移動ツール </wj-menu-item> <wj-menu-item :value="mouseModes.RubberbandTool"> ズームツール </wj-menu-item> <wj-menu-item :value="mouseModes.MagnifierTool"> 拡大鏡ツール </wj-menu-item> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" v-model="fullScreen" /> フルスクリーン </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">ズーム率</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: viewer.MouseMode.SelectTool, fullScreen: false, zoomFactor: 1, mouseModes: viewer.MouseMode }, 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.value; } }, 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"> <!-- SystemJS --> <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>