我有一個 API，它將上傳的檔案作為 blob 回傳。當我嘗試src使用 blob URL系結時，它不顯示任何內容，但是，當我嘗試系結直接 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' 然后它可以顯示
uj5u.com熱心網友回復：
嘗試這個。
ts
pdfSrc: Uint8Array;
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 [src]="pdfSrc"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
uj5u.com熱心網友回復：
我想我有一個解決方案。您可以使用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) => {
}
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/357558.html