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>