angular预览PDF经验总结

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包有2种：

ng2-pdf-viewer ：www.npmjs.com/package/ng2…

ng2-pdfjs-viewer： www.npmjs.com/package/ng2…

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链接： github.com/intbot/ng2-…

使用步骤：

1. 安装

npm install ng2-pdfjs-viewer --save

2. 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 { }

3. 要使用几个高级选项，可以手动从这个npm包中复制copy一份pdfjs的副本并放在assets文件夹下。

 "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": [
                ...
            ]
          },
          ...

5. 页面使用就是这么简单！

<ng2-pdfjs-viewer [pdfSrc]="item.url"></ng2-pdfjs-viewer>