ionic3+angular5查看pdf

1.ng2-pdf-viewer

npm install ng2-pdf-viewer --save   //版本3.0.8

在app.module.ts引入

//PDF
import {PdfViewerModule} from 'ng2-pdf-viewer';

imports: [  //這里只引入此模塊，其他需要引入的根據自己的模塊引入
 PdfViewerModule
]

在使用的頁面引入ts

import { PDFDocumentProxy } from 'ng2-pdf-viewer';

在對應的頁面的module.ts引入

import {PdfViewerModule} from 'ng2-pdf-viewer';

imports: [  //引入同上
  IonicPageModule.forChild(DataInquiryModalPage),PdfViewerModule
]

html

<pdf-viewer [src]="url"-->
 [show-all]="true"
 [original-size]="false"
 [zoom]="num"
 [render-text]="false"
 [autoresize]="true"
 style="display: block" >
<!--</pdf-viewer>

https://vadimdez.github.io/ng2-pdf-viewer/
https://www.npmjs.com/package/ng2-pdf-viewer
有一個缺失就是在移動端時，多次進入頁面時空白，目前為止沒有解決，所以不使用此方法

2.ngx-extended-pdf-viewer

先上npm地址

https://www.npmjs.com/package/ngx-extended-pdf-viewer

https://github.com/tanzl88/ionic-3-extended-pdf-viewer  這里是個demo

這個組件不需要npm i,查看上鏈接下載demo，根據demo的內容把自己的頁面整理完后，在根據以下來更改

新建ionic g component ngx-extended-pdf-viewer 組件

因為自己創建的組件在component.module.ts里是這么引入

import { NgxExtendedPdfViewerComponent } from './ngx-extended-pdf-viewer/ngx-extended-pdf-viewer';

改為

import { NgxExtendedPdfViewerComponent } from './ngx-extended-pdf-viewer/ngx-extended-pdf-viewer.component';

在使用的頁面的module.ts引入

 

import { ComponentsModule } from './../../components/components.module';

imports: [
  IonicPageModule.forChild(DataInquiryModalPage)
 ComponentsModule
],

頁面使用組件

<ngx-extended-pdf-viewer [src]="url" [zoom]="num" [useBrowserLocale]="true"></ngx-extended-pdf-viewer>