我有一个 API,它以 blob 形式返回上传的文件。当我尝试将 src
与 blob URL 绑定(bind)时,它不会显示任何内容,但是,当我尝试绑定(bind)直接 URL 时,它可以显示 PDF 文件。下面是我的代码。
我的TS代码
downloadFile(fileData: Fileuploader) {
this.tempBlob= null;
//Fetching Data File
this.apiservice.getDownloadfile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
this.tempBlob = new Blob([retFileData], { type: this.contentType });
},
(err: Error) => {
},
() => {
const blob: Blob = new Blob([this.tempBlob], { type: this.contentType });
const fileName: string ='ilvsna.pdf';
this.myBlobURL = URL.createObjectURL(blob);
}
);
}
HTML
<pdf-viewer [src]="myBlobURL"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
注意:如果我将 myBlobURL URL 设置为 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' 然后它可以显示
最佳答案
我想我有一个解决方案。您可以使用 ArrayBuffer
。 @NF代码是正确的,但是,您说您在 => this.pdfSrc = new Uint8Array(fileReader.result);
行中出错
因此,将行更改为 => this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);
。
最后,您的 ts 代码应如下所示=>
downloadFile(fileData: Fileuploader) {
this.tempBlob= null;
//Fetching Data File
this.apiservice.getDownloadfile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
this.tempBlob = new Blob([retFileData], { type: this.contentType });
const fileReader = new FileReader();
fileReader.onload = () => {
this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);
};
fileReader.readAsArrayBuffer(this.tempBlob);
},
(err: Error) => {
}
);
}
关于html - 无法在 "pdf-viewer"中显示 blob url => Angular 10 中的 "ng2-pdf-viewer",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69984988/