ionic3+angular5查看pdf

时间 2019-11-08

标签 ionic3+angular5 ionic angular 查看 pdf 栏目 AngularJS 繁體版

原文原文链接

1.ng2-pdf-viewerhtml

   //版本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地址git

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

https://github.com/tanzl88/ionic-3-extended-pdf-viewer 这里是个demonpm

这个组件不须要npm i,查看上连接下载demo，根据demo的内容把本身的页面整理完后，在根据如下来更改app

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

由于本身建立的组件在component.module.ts里是这么引入ui

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

改成spa

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

在使用的页面的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>