HTML PDF查看器

使用PdfViewer查看Web应用程序中的PDF文档,PdfViewer是一种轻量级查看器,用于显示PDF而无需任何第三方PDF阅读器或软件。

  • 包括顶级文档查看器功能,如缩略图显示,滚动,分页和缩放
  • 打印支持
  • 导出功能

特征

PdfViewer允许您的用户在Web或混合移动应用程序中显示PDF文档。

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

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

基本

要显示C1 Web API PDFDocument Services中的PDF文件,请设置以下基本属性:

  1. serviceUrl C1 Web API PDF文档服务的URL。例如, ''。
  2. filePath pdf文件的完整路径。例如,'PdfRoot/DefaultDocument.pdf'。          'PdfRoot'是pdf文件磁盘存储提供程序的密钥,它在服务器上注册以查找指定的pdf文件。     'DefaultDocument.pdf'是pdf文件的相对路径,可由磁盘存储提供程序找到。

C1 Web API PDFDocument Services使用C1PdfDocumentSource来渲染和导出pdf文件。有关详细信息,请参阅如何设置C1 Web API PDF文档服务

此外,PdfViewer控件具有以下属性,允许您自定义其外观和行为:

  • 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 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, 'Mouse Mode'); } }); updateMenuHeader(mouseMode, 'Mouse Mode'); // 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" /> 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('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" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <wj-menu [(value)]="pdfViewer.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)]="pdfViewer.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)]="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" /> 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"> <!-- 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> 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 = { data: null, 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.PdfViewer filePath="PdfRoot/DefaultDocument.pdf" 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/pdf"> </wjViewer.PdfViewer> </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"> <!-- 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; }