基于pdf.js的Angular 2+ PDF查看器

基于pdf.js的Angular 2+  PDF查看器
插件名称 ng2-pdfjs-viewer
发布时间 2020年5月30日
插件作者 intbot

这是一个基于pdf.js的Angular 2+ PDF文件查看器组件

安装:

# NPM
$ npm install ng2-pdfjs-viewer --save

选项

属性 描述 类型 默认值
[pdfSrc] pdf文件的标准路径。(对于通过http / https的远程pdf网址,应启用CORS) string
PDFViewerApplication 此公共属性提供基础的PDFViewerApplication对象。确保在加载文档后对其进行访问。打开了基础PDFJS属性和方法的整个世界。使用它可以自定义查看器和文档体验。 object
PDFViewerApplicationOptions 此公共属性提供基础的PDFViewerApplicationOptions对象。确保在加载文档后对其进行访问。打开基础PDFJS选项的整个世界。使用它可以自定义查看器和文档体验。 object
[viewerFolder] 将路径设置为pdfjs webbuild文件夹。 string assets 资料夹路径
[externalWindow] 在新标签页中打开。设置为true在新标签页中打开文档 boolean false
externalWindowOptions 外部窗口选项。有关允许的逗号分隔值,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window/open string
(onDocumentLoad) 文档完全加载后将调用的事件(必须提供viewerId)。还返回$event参数中的页数。例如(onDocumentLoad)="testPagesLoaded($event)"" Function
(onPageChange) 用户滚动页面时要调用的事件(必须提供viewerId)。还返回用户当前在$event参数中的页码。例如(onPageChange)="testPageChange($event)"" Function
(onBeforePrint) 在文档打印之前要调用的事件(必须提供viewerId)。例如(onBeforePrint)="testBeforePrint()" Function
(onAfterPrint) 打印文档后要调用的事件(必须提供viewerId)。例如(onAfterPrint)="testAfterPrint()" Function
downloadFileName 设置/更改要下载文件的名称。如果文件名不以结尾.pdf,则组件将自动为您添加文件名。 string 文件的实际名称
[page] 显示特定页面。例如page = 3。您也可以使用“。”从组件中获取/设置页码。文档加载后显式表示。例如myPdfViewer.page = 3; number 1
[lastPage] 加载文档后显示最后一页(如果设置为true)。如果同时使用此选项和page选项,则可能会发生不希望的效果 boolean false
nameddest 转到命名的目的地。例如,要转到5.1节,请使用nameddest = 5.1。请勿将此选项与pagelastPage选项混合使用 string
zoom 设置文档的缩放级别。适用值autopage-widthpage-heightpage-fit200(作为缩放比例)left offset(如“自动,18827”) ,top offset正如在“汽车,18,127”) string auto
[print] 显示/隐藏打印按钮。设置false为隐藏 boolean true
[startPrint] 开始文档的打印预览。与externalWindowgmail一样,它可以模拟打印预览功能。 boolean
[download] 显示/隐藏下载按钮。设置false为隐藏 布尔值 true
[find] 显示/隐藏搜索按钮。设置false为隐藏 布尔值 true
[startDownload] 打开文档后立即下载。您可以很好地利用它。 boolean
[rotatecw] 顺时针旋转文档90° boolean
[rotateccw] 将文档逆时针旋转90° boolean
cursor 游标的类型。可用的选项是HAND/HSELECT/SZOOM/Z。大小写无关。 SELECT/S
scroll 设置滚动。可用的选项是VERTICAL/VHORIZONTAL/HWRAPPED/W。大小写无关。 VERTICAL/V
spread 设置奇数或偶数传播。可用的选项是ODD/OEVEN/ENONE/N。大小写无关。 NONE/N
[fullScreen] 显示/隐藏演示(全屏)按钮。设置false为隐藏 boolean true
cursor 游标的类型。可用的选项是HAND/HSELECT/SZOOM/Z。大小写无关。 SELECT/S
pagemode 侧边栏的状态。可用的选项有nonethumbsbookmarksattachments。例如pagemode=attachments none
[openFile] 显示/隐藏打开的文件按钮。设置false为隐藏 布尔值 true
[viewBookmark] 显示/隐藏书签按钮。设置false为隐藏 布尔值 true
[showSpinner] 在文档加载之前显示一个基于CSS的简单微调器/进度 布尔值 true
locale 设置工具栏/按钮和其他查看器元素的语言环境(语言)。例如“ de-AT”,“ en-GB”等 浏览器的默认语言(如果存在),否则 en-US
[useOnlyCssZoom] 指示查看器使用基于CSS的缩放。这将在移动设备和平板电脑上产生更好的缩放效果。 布尔值 false
errorMessage 自定义错误消息
[errorAppend] 将自定义错误消息追加到其他pdfjs错误消息的末尾 true
[errorOverride] 覆盖所有pdfjs错误消息,并仅显示用户的自定义错误消息 布尔值 false
[diagnosticLogs] 打开所有诊断日志到控制台 布尔值 true

请注意,必须执行复制步骤才能享受上面列出的所有不同选项。您也可以避免此步骤,如果您只想使用默认查看器,则可以直接使用https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website

使用

为了方便起见,如果您想查看实际使用中的示例应用程序,可以在该存储库中找到使用angular的示例应用程序(文件夹SampleApp)。它显示了多种方法可以针对不同需求配置此组件。
导入PdfJsViewerComponent后,您可以在Angular应用程序中使用它,如下所示:

<!-- 现在可以在app.component.html中使用库组件 -->
<h1>
{{title}}
</h1>
<ng2-pdfjs-viewer pdfSrc="your pdf file path"></ng2-pdfjs-viewer>

这是一个用例,可以下载并以字节数组形式打开pdf并在新的选项卡/窗口中打开:请注意,pdfSrc也可以是Blob或Uint8Array。要使[externalWindow] =“ true”起作用,弹出窗口需要在浏览器级别启用

<!-- 你的.component.html -->
  <button (click)="openPdf();">打开 Pdf</button>
<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer 
  #pdfViewerOnDemand
  [externalWindow]="true"
  [downloadFileName]="'mytestfile.pdf'"
  [openFile]="false"
  [viewBookmark]="false"
  [download]="false"></ng2-pdfjs-viewer>
  </div>
  <div>
  <div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer #pdfViewerAutoLoad></ng2-pdfjs-viewer>
  </div>
  <div style="height: 600px">
  <ng2-pdfjs-viewer pdfSrc="gre_research_validity_data.pdf" viewerId="MyUniqueID" (onBeforePrint)="testBeforePrint()" (onAfterPrint)="testAfterPrint()" (onDocumentLoad)="testPagesLoaded($event)" (onPageChange)="testPageChange($event)">
  </ng2-pdfjs-viewer>
  </div>
<!-- 你的.component.ts-->
import { Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...

export class MyComponent implements OnInit {
  @ViewChild('pdfViewerOnDemand') pdfViewerOnDemand;
  @ViewChild('pdfViewerAutoLoad') pdfViewerAutoLoad;
  ...

  constructor(private http: HttpClient) {
      let url = "api/document/getmypdf"; // 或者URL地址
      this.downloadFile(url).subscribe(
          (res) => {
              this.pdfViewerAutoLoad.pdfSrc = res; // pdfSrc可以是Blob或Uint8Array
              this.pdfViewerAutoLoad.refresh(); // 要求pdf查看器加载/刷新pdf
          }
      );
  }

  private downloadFile(url: string): any {
        return this.http.get(url, { responseType: 'blob' })
            .pipe(
                map((result: any) => {
                    return result;
                })
            );
    }

  public openPdf() {
    let url = "url获取pdf作为字节数组"; // 例如. http://localhost:3000/api/GetMyPdf
    // url可以是本地url或对api/pdf文件的远程http请求。 
    // 例如: let url = "assets/pdf-sample.pdf";
    // 例如: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // 例如: http://localhost:3000/api/GetMyPdf
    // 请注意,要使远程url起作用,应该在服务器上启用CORS。阅读:https://enable-cors.org/server.html

    this.downloadFile(url).subscribe(
    (res) => {
        this.pdfViewerOnDemand.pdfSrc = res; // pdfSrc可以是Blob或Uint8Array
        this.pdfViewerOnDemand.refresh(); // 要求pdf查看器加载/重新运行pdf
      }
    );
  }

附加信息

下面给出了编写服务器api(在aspnetcore c#中)的示例,该示例将pdf返回为字节数组。您可以选择任何服务器端技术,只要pdf以字节数组形式返回即可

用例1。作为RDLC本地报告查看器

[HttpGet]
[Route("MyReport")]
public IActionResult GetReport()
{
   // var reportObjectList1
   // var reportObjectList2
   var reportViewer = new ReportViewer {ProcessingMode = ProcessingMode.Local};
   reportViewer.LocalReport.ReportPath = "Reports/MyReport.rdlc";

   reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource1", reportObjectList1));
   reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource2", reportObjectList1));

   Warning[] warnings;
   string[] streamids;
   string mimeType;
   string encoding;
   string extension;

   var bytes = reportViewer.LocalReport.Render("application/pdf", null, out mimeType, out encoding, out extension, out streamids, out warnings);
   return File(bytes, "application/pdf")
}

用例2。从服务器返回物理pdf

[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
   var stream = await {{__get_stream_here__}}
   return File(stream, "application/pdf")); // FileStreamResult
   
  // OR
  // var bytes = await {{__get_bytes_here__}}
  // return File(bytes, "application/pdf")
}

OR

[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
    var pdfPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/assets/pdfjs/web/gre_research_validity_data.pdf");
    byte[] bytes = System.IO.File.ReadAllBytes(pdfPath);
    return File(bytes, "application/pdf");
}