Ionic 3 เปิด PDF โคตรง่ายด้วย ng2-pdf-viewer

2 min readMar 9, 2018

สวัสดีท่านผู้อ่านทุกท่านนะคร๊าบ…ผม CEO ถึงอาจจะไม่ใช่ตอนนี้แต่อนาคตไม่แน่ครับ จบการแนะนำตัวเองแต่เพียงเท่านี้นะ.

ก่อนจะเริ่มนะ ผมขอเล่าที่มาของบทความนี้ให้ฟังสักนิ๊ดนึง คือว่างี้ ตั้งแต่เช้าวันหนึ่งยันถึงเที่ยงอีกวัน นั่งหานั่งทำ เพื่อเปิด PDF ให้ได้ในโปรเจค Android ที่เขียนด้วย Ionic, มันก็มี plugin หลายตัวอยู่นะ แต่ปัญหาคือ ใช้ไม่เป็น 555

และแล้ว Google ก็มีตาพาผมไปเจอกับ ng2-pdf-viewer ที่มันง่ายมากๆ จนเดินไปซื้อน้ำมานั่งซด ก่อนจะลงมือ 555

ตามได้ที่ลิ้งนี้นะครับ คลิก

โอเค เหนื่อยกับการพิมพ์อะไรยาวๆละ มาเริ่มกันเลย.

ขั้นตอนที่ 1

สร้างโปรเจคก่อนเลย…ท่านใดสร้างไว้แล้วก็ข้ามไป

ionic start pdfViewer blank

ขั้นตอนที่ 2

run คำสั่งด้านล่าง เพื่อติดตั้ง ng2-pdf-viewer มาไว้ในโปรเจคของท่าน

npm install ng2-pdf-viewer --save

ขั้นตอนที่ 3

ก่อนที่จะใช้ ng2-pdf-viewer ได้นั้น ท่านต้องทำการ import มันมาซะก่อน เข้าไปที่ไฟล์ src/app/app.mudule.ts แล้วท่านก็เพิ่มที่ทำ ดำๆ ไว้เข้าไปตามด้านล่าง

import { PdfViewerModule } from 'ng2-pdf-viewer';@NgModule({
  imports: [
    PdfViewerModule
  ]
})

ขั้นตอนที่ 4

เข้าไปที่โฟลเดอร์ page ที่ท่านต้องการจะทำ ยกตัวอย่าง Home ละกันนะ ซึ่งไฟล์ที่เกี่ยวข้องมีด้วยกัน 2 ไฟล์ คือ home.ts และ home.html

home.ts

ท่านจะต้องทำการสร้างตัวแปรไว้บน constructor เพื่อใช้ในการกำหนดคุณสมบัติการแสดงผล pdf ของท่าน ให้ดูดีสวยงามพระราม 8 และ 9(ใส่เยอะกว่านี้ก็ได้ใน git มีบอกอยู่นะจ๊ะ)

pdfSrc: string = 'http://pdf995.com/samples/pdf.pdf'; //ลิ้ง pdf ที่จะดู
pdfZoom: any = 1; //ซูมแบบพอดีหน้าจอ
pdfOriginalSize: any = false; //ไม่แสดงขนาดจริงเกิดใหญ่ไปดูไม่ได้อีก
pdfShowAll: any = true; //แสดงครบทุกหน้า
pdfRenderText: any = false; //ไม่สามารถคลุมข้อความ copy ได้
pdfAutoResize: any = true; //ปรับขนาดให้พอดีหน้าจอ

home.html

ต่อมาท่านจะต้องเพิ่ม tagpdf-viewer ภายใน tagion-content ดังนี้

<ion-content>
   <pdf-viewer 
      [src]="pdfSrc" 
      [zoom]="pdfZoom" 
      [original-size]="pdfOriginalSize" 
      [show-all]="pdfShowAll" 
      [render-text]="pdfRenderText" 
      [autoresize]="pdfAutoResize" 
      style="display: block;"> 
   </pdf-viewer>
</ion-content>