ng2 pdf viewer

ผู้ชม PDF เชิงมุม

ส่วนประกอบ PDF Viewer สำหรับ Angular 5+

หน้าสาธิต

https://vadimdez.github.io/ng2-pdf-viewer/

ตัวอย่าง stackblitz

https://stackblitz.com/edit/ng2-pdf-viewer

โพสต์บล็อก

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

ภาพรวม

• ติดตั้ง
• การใช้งาน
• ตัวเลือก
• แสดงไฟล์ PDF ในพื้นที่
• ตั้งค่าเส้นทางที่กำหนดเองไปยังคนงาน
• ค้นหาใน PDF
• มีส่วนช่วย

ติดตั้ง

Angular> = 12

 npm install ng2-pdf-viewer

การรวมกลุ่มห้องสมุดที่รวบรวมไว้บางส่วน

Angular> = 4

 npm install ng2-pdf-viewer@^7.0.0

Angular <4

 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]
• [(หน้าหนังสือ)]
• [stick-to-page]
• [เป้าหมายภายนอกลิงก์]
• [Render-Text]
• [โหมดข้อความเรนเดอร์]
• [การหมุน]
• [ซูม]
• [ซูม-ระดับ]
• [ขนาดดั้งเดิม]
• [fit-to-page]
• [show-all]
• [autoresize]
• [C-MAPS-URL]
• [การแสดง-พรุน]
• (หลังโหลด)
• (หน้าแสดง)
• (การเรนเดอร์ข้อความ)
• (ข้อผิดพลาด)
• (บนกำลังดำเนินการ)

[SRC]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[SRC]	String, Object, 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
} 

[หน้าหนังสือ]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[หน้า] หรือ [(หน้า)]	ตัวเลข	จำเป็น ด้วย [show-all] = "false" หรือ เป็นตัวเลือก ด้วย [show-all] = "true"

หมายเลขหน้า

 [page]="1"

รองรับการเชื่อมโยงข้อมูลสองทางเช่นกัน

 [(page)]="pageVariable"

หากคุณต้องการให้ two way data binding อัปเดตตัวแปร page ของคุณในการเปลี่ยน/เลื่อนหน้า - คุณต้องแน่ใจว่าคุณกำหนดความสูงของคอนเทนเนอร์ตัวอย่างเช่น:

 pdf-viewer {
    height : 100 vh ;
}

[stick-to-page]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[stick-to-page]	บูลีน	ไม่จำเป็น

มองดูไปที่หน้า ทำงานร่วมกับ [show-all]="true" และ page

 [stick-to-page]="true"

[Render-Text]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[Render-Text]	บูลีน	ไม่จำเป็น

เปิดใช้งานการเรนเดอร์ข้อความอนุญาตให้เลือกข้อความ

 [render-text]="true"

[โหมดข้อความเรนเดอร์]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[โหมดข้อความเรนเดอร์]	RenderTextMode	ไม่จำเป็น

ใช้ร่วมกับ [render-text]="true"

ควบคุมหากเปิดใช้งานเลเยอร์ข้อความและโหมดการเลือกที่ใช้

0 = RenderTextMode.DISABLED - ปิดใช้งานเลเยอร์การเลือกข้อความ

1 = RenderTextMode.ENABLED - เปิดใช้งานเลเยอร์การเลือกข้อความ

2 = RenderTextMode.ENHANCED - เปิดใช้งานการเลือกข้อความขั้นสูง

 [render-text-mode]="1"

[เป้าหมายภายนอกลิงก์]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[เป้าหมายภายนอกลิงก์]	สาย	ไม่จำเป็น

ใช้ร่วมกับ [render-text]="true"

เป้าหมายเชื่อมโยง

• blank
• none
• self
• parent
• top

 [external-link-target]="'blank'"

[การหมุน]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[การหมุน]	ตัวเลข	ไม่จำเป็น

หมุน PDF

ขั้นตอนที่อนุญาตคือ 90 องศาเช่น 0, 90, 180

 [rotation]="90"

[ซูม]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[ซูม]	ตัวเลข	ไม่จำเป็น

ซูม PDF

 [zoom]="0.5"

[ซูม-ระดับ]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[ซูม-ระดับ]	'Page-Width' | 'Page-Fit' | 'Page-Height'	ไม่จำเป็น

กำหนดวิธีการคำนวณมาตราส่วนซูมเมื่อ [original-size]="false" โดยเริ่มต้นตั้งค่าเป็น 'หน้าความกว้าง'

• 'Page-Width' ด้วยการ Zoom of 1 จะแสดงความกว้างของหน้าเว็บที่ใช้พื้นที่แนวนอนที่เป็นไปได้ทั้งหมดในคอนเทนเนอร์

• 'หน้า-สูง' ด้วยการซูมของ 1 จะแสดงความสูงของหน้าเว็บที่ใช้พื้นที่แนวตั้งที่เป็นไปได้ทั้งหมดในคอนเทนเนอร์

• 'Page-Fit' ด้วยการ Zoom of 1 จะแสดงหน้าเว็บที่จะถูกปรับขนาดเป็นความกว้างหรือความสูงเพื่อให้พอดีกับคอนเทนเนอร์อย่างสมบูรณ์

 [zoom-scale]="'page-width'"

[ขนาดดั้งเดิม]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[ขนาดดั้งเดิม]	บูลีน	ไม่จำเป็น

• หากตั้งค่าเป็น จริง - ขนาดจะเหมือนกับเอกสารต้นฉบับ
• หากตั้งค่าเป็น เท็จ - ขนาดจะเหมือนกับบล็อกคอนเทนเนอร์

 [original-size]="true"

[fit-to-page]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[fit-to-page]	บูลีน	ไม่จำเป็น

ทำงานร่วมกับ [original-size]="true" คุณสามารถแสดงเอกสารของคุณในขนาดดั้งเดิมและตรวจสอบให้แน่ใจว่ามันไม่ใหญ่กว่านั้นบล็อกคอนเทนเนอร์

 [fit-to-page]="false"

[show-all]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[show-all]	บูลีน	ไม่จำเป็น

แสดงหน้าเดี่ยวหรือทั้งหมดโดยสิ้นเชิง

 [show-all]="true"

[autoresize]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[autoresize]	บูลีน	ไม่จำเป็น

เปิดหรือปิดการปรับขนาดอัตโนมัติ

! สิ่งสำคัญ ที่จะทำให้ [autoresize] ทำงาน-ตรวจสอบให้แน่ใจว่า [original-size]="false" และแท็ก pdf-viewer มีการตั้งค่า max-width หรือ display

 [autoresize]="true"

[C-MAPS-URL]

คุณสมบัติ	พิมพ์	ที่จำเป็น
[C-MAPS-URL]	สาย	ไม่จำเป็น

URL สำหรับแผนที่แหล่งที่มาของอักขระที่ไม่ใช่ละติน

 [c-maps-url]="'assets/cmaps/'"

URL เริ่มต้นคือ: https://unpkg.com/[email protected]/cmaps/

ในการให้บริการ CMAPs ด้วยตัวคุณเองคุณต้องคัดลอก 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 ในเทมเพลตของ Component

(error)="onError($event)"

(บนกำลังดำเนินการ)

คุณสมบัติ	พิมพ์	ที่จำเป็น
(บนกำลังดำเนินการ)	การโทรกลับ	ไม่จำเป็น

การโหลดความคืบหน้าการโทรกลับ - ให้ข้อมูลความคืบหน้า total และไบต์ loaded เรียกว่าหลายครั้งในระหว่างขั้นตอนการโหลด PDF

กำหนดโทรกลับในชั้นเรียนขององค์ประกอบของคุณ

 onProgress ( progressData : PDFProgressData ) {
  // do anything with progress data. For example progress indicator
}

จากนั้นเพิ่มลงใน pdf-component ในเทมเพลตของ Component

(on-progress)="onProgress($event)"

แสดงไฟล์ PDF ในพื้นที่

ในเทมเพลต 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 รุ่นต่าง ๆ เพิ่มการสนับสนุน คุณสามารถทำได้ข้างต้นยกเว้นว่าคุณสามารถต่อท้าย PDFJS เวอร์ชันเฉพาะที่ต้องการและแทนที่เส้นทางที่กำหนดเอง สำหรับเวอร์ชันนั้น วิธีนี้การตั้งค่าหน้าต่างทั่วโลกจะไม่ขัดแย้งกัน

 ( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ; 

ค้นหาใน PDF

ใช้ 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
  } ) ;
} 

มีส่วนช่วย

ดูการสนับสนุน. md

การบริจาค

หากโครงการนี้ช่วยคุณลดเวลาในการพัฒนาคุณสามารถให้ชาสักถ้วยกับฉัน :)

ใบอนุญาต

MIT © Vadym Yatsyuk