首页 文章

使用ng2-pdf-viewer在Angular中显示PDF文件

提问于
浏览 次
4

我正在尝试使用ng2-pdf-viewer组件从我的ASP.NET Web API后端显示多个PDF . 我've added PdfViewerComponent to my module'的声明和提供的示例工作正常：

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;">
  </pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
}

当我尝试从我的任何其他资源加载pdf src时出现问题 .

我第一次遇到CORS问题，但后来我用DomSanitizer解决了这个问题 . 每当我尝试加载PDF时出现的新错误是：

ERROR Error: Invalid parameter object: need either .data, .range or .url
    at Object.getDocument (pdf.js:2867)
    at PdfViewerComponent.webpackJsonp.../../../../ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.loadPDF

我已经搜索了高低问题的解决方案，但我无法理解 . 任何帮助将深表感谢 .

如果您希望我提供任何其他信息，请告诉我 .

angular pdf

1 回答

  • 1

    我注意到你已经在几个论坛上发布了这个问题 . 我希望在这个时候你已经解决了这个问题 . 如果你没有，这是我的解决方案：

    所以问题是我的API（以及你的假设）正在返回一个流 . 这显然不适用于 ng2-pdf-viewer . 使用它的是strings, objects, and UInt8Arrays.

    如果像我一样，你并不热衷于改变API的实际响应，因为许多其他逻辑依赖于它，你可以在前端转换它 . 这是通过设置 HttpResponseType 来完成的：

    this.http.get(
  `/url/to/photo/stream`,
  {responseType: 'arraybuffer' as 'json'}
)

    这基本上做的是它对可以被消费的东西进行类型转换： json . 这是我理解它的方式 . 有关这方面的更多信息，请参见Angular repository issues .

    此调用的响应现在可由 ng2-pdf-viewer 读取！

    我希望这有帮助！

    回复于

相关问题