angular预览PDF总结

最新推荐文章于 2024-11-08 10:56:08 发布

大个子小可爱

最新推荐文章于 2024-11-08 10:56:08 发布

阅读量3.9k

点赞数 1

分类专栏： angular6系列

本文链接：https://blog.csdn.net/weixin_44628533/article/details/102682074

版权

angular6系列专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Angular中预览PDF文件的三种npm包：ng2-pdf-viewer、ng2-pdfjs-viewer和HHAngular。当需要简单展示PDF时，ng2-pdf-viewer是一个简洁的选择；若需自定义视图，ng2-pdfjs-viewer提供了基本控制；而HHAngular则提供了丰富的展示效果，适用于PC端。文章还给出了使用这些包的步骤和参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

单个页面可以同时预览多份PDF，这样就无法使用window.open('https:www.wxw.pdf','_self');的方式去利用自带浏览器去解析PDF。
因为原因（1），所以采用iframe去嵌入解析多个PDF链接。但是又发现，安卓手机端无法直接加载显示PDF,会强制提醒用户下载后再查看。
因为方式（1）（2）都被PASS，所以，只能查找相关插件进行PDF解析加载。

目前收集到的angular方面解析加载PDF的npm包有3种：

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>

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>

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