我尝试使用ng2-pdf-viewer组件从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
我已经高低搜索了解决问题的方法,但我无法弄明白。任何帮助都将深表感谢。
如果您希望我提供任何其他信息,请告知我们。
答案 0 :(得分:1)
我注意到你已经在几个论坛上发布了这个问题。我希望在这个时候你已经解决了这个问题。如果你没有,这是我的解决方案:
所以问题是我的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
读取!
我希望这有帮助!