ionic3+angular5查看pdf

五迷三道 提交于 2019-11-26 20:23:53

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>
 

 

 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!