前言

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]="item.zoom" [original-size]="true"style="display: block;" class="d-iframe-box"></pdf-viewer>

2. ng2-pdfjs-viewer

• 如果需求强调你的PDF必须支持放大缩小等等一系列要求…，就需要换成ng2-pdfjs-viewer。
• 此包自带的底层采用的是pdf.js,并且自带的有一套放大，缩小视图，无需我们自定义，比较棒！
• 官方提供的angular版本的demo链接： https://github.com/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 './app.component';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>

3. HHAngular

这个npm包主要是关于PC端PDF预览的插件，看demo是支持很多花哨的展示方式，类似于轮播展示，但是本人还没有亲测过，收藏一下，以后关于PC端的PDF预览可以考虑这个插件。

参考链接

• ng2-pdf-viewer ：https://www.npmjs.com/package/ng2-pdf-viewer
• ng2-pdfjs-viewer： https://www.npmjs.com/package/ng2-pdfjs-viewer
• HHAngular：https://hhangular.hhdev.fr/en-us/pdfjs/pdfjsview