无法在 "pdf-viewer" 中显示 blob url => Angular 中的 "ng2-pdf-viewer" 10

Question

我有一个 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>

注意：如果我把myBlobURLURL设置为'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'那么它可以显示

Answer 1

试试这个。

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>

Answer 2

我想我有适合您的解决方案。您可以使用 ArrayBuffer。 @N.F。代码是正确的，但是，你说你在 => 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) => {
                
            }
        );
    }

Answer 3

我使用来自服务的 return blob 文件的 window.URL.createObjectURL 进行解析：
-- ts 文件

this.obuService.getObuDocument(obuId, fileId).subscribe(
  (data: HttpResponse<Blob>) => {
    const url = window.URL.createObjectURL(data.body);
    this.src = url;
    this.viewPDF = true;
  }
);

-- 服务

getObuDocument(obuId: number, fileId: number): Observable<any> {
const options = {
  observe: 'response' as 'body',
  Accept: 'application/pdf',
  responseType: 'blob' as 'blob'
};
return this.http.get(this.apiUrl + '/' + obuId + '/upload/' + fileId, options)
  .pipe(catchError(err => { throw err; }));

}

无法在 "pdf-viewer" 中显示 blob url => Angular 中的 "ng2-pdf-viewer" 10

Unable to show blob url in "pdf-viewer" => "ng2-pdf-viewer" in Angular 10

html

pdf

api

typescript

angular