gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:26:35 25 4
gpt4 key购买 nike

我正在尝试使用 ng2-pdf-viewer组件显示来 self 的 ASP.NET Web API 后端的多个 PDF。我已将 PdfViewerComponent 添加到我的模块声明中,并且提供的示例工作正常:

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

我四处寻找问题的解决方案,但就是想不出来。任何帮助将不胜感激。

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

最佳答案

我注意到您已经在多个论坛上发布了这个问题。我希望此时您已经解决了这个问题。如果您还没有,这是我的解决方案:

所以问题是我的 API(我假设是你的)正在返回一个流。这显然不适用于 ng2-pdf-viewer。与它一起工作的是 strings, objects, and UInt8Arrays.

如果您像我一样不热衷于更改 API 的实际响应,因为许多其他逻辑都依赖于它,您可以改为在前端对其进行转换。这是通过设置 HttpResponseType 来完成的:

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

这实际上是将响应(arraybuffer)类型转换为可以使用的东西:json。这是我理解它的方式。有关这方面的更多信息,请参阅 Angular repository issues .

ng2-pdf-viewer 现在可以读取此调用的响应!

希望对您有所帮助!

关于angular - 使用 ng2-pdf-viewer 在 Angular 中显示 PDF 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46753522/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com