ionic3+angular5查看pdf

1.ng2-pdf-viewer

   //版本3.0.8

在app.module.ts引入npm install ng2-pdf-viewer --save

//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>