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
