1.ng2-pdf-viewer
npm install ng2-pdf-viewer --save //版本3.0.8在app.module.ts引入
//PDFimport {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>