PDFビューワー

PdfViewer コントロールを使用すると、ユーザーはWebまたはハイブリッドモバイルアプリでPDF文書を表示できます。PdfViewer は、スクロール、ページング、ズームなどをサポートしています。この例を使用して、基本機能を確認してください。

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 pdfViewer = new viewer.PdfViewer('#pdfViewer', { serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf', filePath: 'PdfRoot/DefaultDocument.pdf', zoomFactorChanged: (sender) => { zoomFactor.value = sender.zoomFactor; } }); // document.querySelector('#cbContinuousViewMode').addEventListener('click', (e) => { pdfViewer.viewMode = e.target.checked ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; }); // let mouseMode = new input.Menu('#lbMouseMode', { itemClicked: (sender) => { pdfViewer.mouseMode = sender.selectedValue; updateMenuHeader(sender, 'マウスモード'); } }); updateMenuHeader(mouseMode, 'マウスモード'); // document.querySelector('#cbFullScreen').addEventListener('click', e => { pdfViewer.fullScreen = e.target.checked; }); // let zoomFactor = new input.InputNumber('#txtZoomFactor', { min: 0.05, max: 10, step: 0.1, format: 'n2', value: pdfViewer.zoomFactor, valueChanged: (sender) => { if (sender.value >= sender.min && sender.value <= sender.max) { pdfViewer.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="pdfViewer"></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('pdfViewer') pdfViewer: viewer.PdfViewer; // get continuousViewMode(): boolean { return this.pdfViewer.viewMode === viewer.ViewMode.Continuous; } set continuousViewMode(value: boolean) { this.pdfViewer.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-pdf-viewer #pdfViewer [serviceUrl]="'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf'" [filePath]="'PdfRoot/DefaultDocument.pdf'"> </wj-pdf-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)]="pdfViewer.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)]="pdfViewer.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)]="pdfViewer.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-pdf-viewer serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf" filePath="PdfRoot/DefaultDocument.pdf" :viewMode="viewMode" :mouseMode="mouseMode" :fullScreen="fullScreen" :zoomFactor="zoomFactor" :viewModeChanged="viewModeChanged" :fullScreenChanged="fullScreenChanged" :zoomFactorChanged="zoomFactorChanged"> </wj-pdf-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"> <label for="mouseModeMenu">マウスモード</label> <wj-combo-box id="mouseModeMenu" :itemsSource="mouseModeOptions" :text="mouseMode" :textChanged="mouseModeTextChanged"> </wj-combo-box> </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: 0, mouseModeOptions: ['選択ツール', '移動ツール', 'ズームツール', '拡大鏡ツール'], 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; }, mouseModeTextChanged(sender) { this.mouseMode = sender.selectedIndex; }, 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>