ng2 pdf viewer
10.3.4
PDF查看器组件的Angular 5+
https://vadimdez.github.io/ng2-pdf-viewer/
https://stackblitz.com/edit/ng2-pdf-viewer
https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76
npm install ng2-pdf-viewer
部分常春藤汇编库捆绑包。
npm install ng2-pdf-viewer@^7.0.0
npm install ng2-pdf-viewer@~3.0.8
如果您使用systemjs请参见此处的配置。
将PdfViewerModule添加到模块的imports
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { AppComponent } from './app/app.component' ;
import { PdfViewerModule } from 'ng2-pdf-viewer' ;
@ NgModule ( {
imports : [ BrowserModule , PdfViewerModule ] ,
declarations : [ AppComponent ] ,
bootstrap : [ AppComponent ]
} )
class AppModule { }
platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ;然后在组件中使用它
import { Component } from '@angular/core' ;
@ Component ( {
selector : 'example-app' ,
template : `
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
`
} )
export class AppComponent {
pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf" ;
} | 财产 | 类型 | 必需的 |
|---|---|---|
| [SRC] | 字符串，对象，uint8array | 必需的 |
通过PDF位置
[src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
有关更多控件，您可以将选项对象传递给[src] 。在此处查看对象的其他属性。
加载受保护的PDF的选项对象是：
{
url : 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' ,
withCredentials : true
} | 财产 | 类型 | 必需的 |
|---|---|---|
| [页]或[（page）] | 数字 | [show-all] =“ false”或[show-all] =“ true”所需 |
页码
[page]="1"
也支持两种方式数据绑定
[(page)]="pageVariable"
如果您希望two way data binding实际上会更新页面上的page变量/滚动 - 例如，您必须确保定义容器的高度，例如：
pdf-viewer {
height : 100 vh ;
}| 财产 | 类型 | 必需的 |
|---|---|---|
| [Stick toepage] | 布尔 | 选修的 |
贴在页面上的视图。与[show-all]="true"和page结合使用。
[stick-to-page]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [渲染文本] | 布尔 | 选修的 |
启用文本渲染，允许选择文本
[render-text]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [渲染文本模式] | RenderTextMode | 选修的 |
与[render-text]="true"一起使用
控制是否启用了文本层以及使用的选择模式。
0 = RenderTextMode.DISABLED禁用文本选择层
1 = RenderTextMode.ENABLED启用文本选择层
2 = RenderTextMode.ENHANCED启用增强的文本选择
[render-text-mode]="1"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [外部链接目标] | 细绳 | 选修的 |
与[render-text]="true"一起使用
链接目标
blanknoneselfparenttop [external-link-target]="'blank'"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [旋转] | 数字 | 选修的 |
旋转PDF
允许的步骤是90度，例如。 0、90、180
[rotation]="90"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [飞涨] | 数字 | 选修的 |
变焦PDF
[zoom]="0.5"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [Zoom规模] | 'Page Width'|'Page-fit'|'Page-Height' | 选修的 |
定义如何计算缩放量表当[original-size]="false" ，默认设置为'Page Width'。
1个缩放为1的“页面宽度”将显示一个页面宽度，该页面宽度可在容器中占用所有可能的水平空间
1个缩放为1的“ page-height”将显示一个页面高度，该高度在容器中占据所有可能的垂直空间
1个缩放为1的“ page-fit”将显示一个页面，该页面将缩放到宽度或高度，以完全适合容器
[zoom-scale]="'page-width'"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [原始大小] | 布尔 | 选修的 |
[original-size]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [适合页面] | 布尔 | 选修的 |
与[original-size]="true"结合使用。您可以以原始尺寸显示文档，并确保它不超过容器块。
[fit-to-page]="false"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [show-all] | 布尔 | 选修的 |
完全显示单个或所有页面
[show-all]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [自动化] | 布尔 | 选修的 |
打开或关闭自动调整大小。
！使[autoresize]工作很重要 - 确保设置了[original-size]="false" ，而pdf-viewer标签设置了max-width或display 。
[autoresize]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| [C-Maps-url] | 细绳 | 选修的 |
非拉丁字符源地图的URL。
[c-maps-url]="'assets/cmaps/'"
默认URL是：https：//unpkg.com/[email protected]/cmaps/
要独自提供CMAP，您需要将node_modules/pdfjs-dist/cmaps复制到assets/cmaps 。
| 财产 | 类型 | 必需的 |
|---|---|---|
| [表演者] | 布尔 | 选修的 |
显示页面边界
[show-borders]="true"
| 财产 | 类型 | 必需的 |
|---|---|---|
| （完成后完成） | 打回来 | 选修的 |
通过回调获取PDF信息
首先在控制器中定义回调函数“ callbackfn”，
callBackFn ( pdf : PDFDocumentProxy ) {
// do anything with "pdf"
}然后在模板中使用它：
(after-load-complete)="callBackFn($event)"
| 财产 | 类型 | 必需的 |
|---|---|---|
| （页面渲染） | 打回来 | 选修的 |
渲染页面时获取事件。要求每个页面渲染。
在组件中定义回调：
pageRendered ( e : CustomEvent ) {
console . log ( '(page-rendered)' , e ) ;
}然后将其绑定到<pdf-viewer> ：
(page-rendered)="pageRendered($event)"
| 财产 | 类型 | 必需的 |
|---|---|---|
| （初始化页面） | 打回来 | 选修的 |
初始化页面时获取事件。
在组件中定义回调：
pageInitialized ( e : CustomEvent ) {
console . log ( '(pages-initialized)' , e ) ;
}然后将其绑定到<pdf-viewer> ：
(pages-initialized)="pageInitialized($event)"
| 财产 | 类型 | 必需的 |
|---|---|---|
| （文本渲染） | 打回来 | 选修的 |
渲染文本层时获取事件。
在组件中定义回调：
textLayerRendered ( e : CustomEvent ) {
console . log ( '(text-layer-rendered)' , e ) ;
}然后将其绑定到<pdf-viewer> ：
(text-layer-rendered)="textLayerRendered($event)"
| 财产 | 类型 | 必需的 |
|---|---|---|
| （错误） | 打回来 | 选修的 |
错误处理回调
定义组件类中的回调
onError ( error : any ) {
// do anything
}然后将其添加到组件模板中的pdf-component
(error)="onError($event)"| 财产 | 类型 | 必需的 |
|---|---|---|
| （内部） | 打回来 | 选修的 |
加载进度回调 - 提供进度信息total loaded字节。在PDF加载阶段被称为几次。
定义组件类中的回调
onProgress ( progressData : PDFProgressData ) {
// do anything with progress data. For example progress indicator
}然后将其添加到组件模板中的pdf-component
(on-progress)="onProgress($event)"在您的html模板中添加input ：
< input (change) =" onFileSelected() " type =" file " id =" file " >然后将onFileSelected方法添加到您的组件：
onFileSelected ( ) {
let $img : any = document . querySelector ( '#file' ) ;
if ( typeof ( FileReader ) !== 'undefined' ) {
let reader = new FileReader ( ) ;
reader . onload = ( e : any ) => {
this . pdfSrc = e . target . result ;
} ;
reader . readAsArrayBuffer ( $img . files [ 0 ] ) ;
}
} 默认情况下，该worker是从cdn.jsdelivr.net加载的。
在您的代码更新path中，工人为/pdf.worker.mjs
( window as any ) . pdfWorkerSrc = '/pdf.worker.mjs' ;应在渲染pdf-viewer组件之前设置此设置。
如果您有一个（超级稀有）的边缘案例，其中您在一个环境中运行多个组件以某种方式加载在同一网页中，共享同一窗口，但是使用不同版本的PDF.Worker，则添加了支持。您可以执行以上操作，只是您可以附加所需的PDFJ的特定版本，并仅适用于该版本的自定义路径。这样，设置全局窗口var就不会发生冲突。
( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ; 使用eventBus进行搜索功能。
在您的组件的TS文件中：
pdf-viewer组件，search()如下： @ ViewChild ( PdfViewerComponent ) private pdfComponent: PdfViewerComponent ;
search ( stringToSearch : string ) {
this . pdfComponent . eventBus . dispatch ( 'find' , {
query : stringToSearch , type : 'again' , caseSensitive : false , findPrevious : undefined , highlightAll : true , phraseSearch : true
} ) ;
} 参见贡献
如果该项目可以帮助您减少开发时间，您可以给我喝杯茶:)
MIT©Vadym Yatsyuk
