angular预览PDF总结
前⾔
1. 单个页⾯可以同时预览多份PDF，这样就⽆法使⽤window.open('https:www.wxw.pdf','_self')；的⽅式去利⽤⾃带浏览器去解析PDF。
2. 因为原因（1），所以采⽤iframe去嵌⼊解析多个PDF链接。但是⼜发现，安卓⼿机端⽆法直接加载显⽰PDF，会强制提醒⽤户下载后
再查看。
3. 因为⽅式（1）（2）都被PASS，所以，只能查相关插件进⾏PDF解析加载。
⽬前收集到的angular⽅⾯解析加载PDF的npm包有3种：
1. ng2-pdf-viewer
如果只是需要简单的展⽰⼀个PDF，并没有特别复杂的需求，⽐如：需要⽀持放⼤缩⼩，页数等等，可以考虑这个npm包，并且界⾯会⽐较简洁⼤⽅。
这个npm包，⽆法⽀持UI化的放⼤，缩⼩，页数等视图，需要⾃定义放⼤，缩⼩按钮。。
但是基本的控制PDF的放⼤，缩⼩的属性，npm提供的有，可以根据提供的变量或者⽅法⾃定义视图。
// 安装
npm install ng2-pdf-viewer --save
// angular 导⼊参考下⾯ng2-pdfjs-viewer的栗⼦~
<pdf-viewer [src]="item.url"[show-all]="true"[autoresize]="true"[zoom]=""[original-size]="true"
class="d-iframe-box"></pdf-viewer>
2. ng2-pdfjs-viewer
如果需求强调你的PDF必须⽀持放⼤缩⼩等等⼀系列要求…，就需要换成ng2-pdfjs-viewer。
此包⾃带的底层采⽤的是pdf.js，并且⾃带的有⼀套放⼤，缩⼩视图，⽆需我们⾃定义，⽐较棒！
官⽅提供的angular版本的demo链接： github/intbot/ng2-pdfjs-viewer/tree/master/SampleApp
使⽤步骤：
安装
npm install ng2-pdfjs-viewer --save
Angular AppModule中配置它
import{ BrowserModule }from'@angular/platform-browser';
import{ NgModule }from'@angular/core';
import{ AppComponent }from'./appponent';
import{ PdfJsViewerModule }from'ng2-pdfjs-viewer';// <-- Import PdfJsViewerModule module
// import { PdfViewerModule } from 'ng2-pdf-viewer';  // 导⼊PdfViewerModule包！
@NgModule({
declarations:[
AppComponent,
],
imports:[
BrowserModule,
// PdfViewerModule,
PdfJsViewerModule // <-- Add to declarations
],
providers:[],
bootstrap:[AppComponent]
})
export class AppModule {}
要使⽤⼏个⾼级选项，可以⼿动从这个npm包中复制copy⼀份pdfjs的副本并放在assets⽂件夹下。
在angular.json中配置相关引⽤选项：
"architect":{
"build":{
"builder":"@angular-devkit/build-angular:browser",
"options":{
"tsConfig":"src/tsconfig.app.json",
"assets":[
"src/favicon.ico",
"src/assets",
{
"glob":"**/*",
"input":"node_modules/ng2-pdfjs-viewer/pdfjs",<---看这⾥！
"output":"/assets/pdfjs"<---看这⾥！
}
],
"styles":[
...
]
},
...
页⾯使⽤就是这么简单！
<ng2-pdfjs-viewer [pdfSrc]="item.url"></ng2-pdfjs-viewer>angular安装
3. HHAngular
这个npm包主要是关于PC端PDF预览的插件，看demo是⽀持很多花哨的展⽰⽅式，类似于轮播展⽰，但是本⼈还没有亲测过，收藏⼀下，以后关于PC端的PDF预览可以考虑这个插件。
参考链接
ng2-pdf-viewer ：www.npmjs/package/ng2-pdf-viewer ng2-pdfjs-viewer： www.npmjs/package/ng2-pdfjs-viewer HHAngular：hhangular.hhdev.fr/en-us/pdfjs/pdfjsview

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。