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

Question

我有一个 API，它将上传的文件作为 blob 返回。当我尝试绑定srcblob 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);
            }
        );
    }

超文本标记语言

 <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' 那么它可以显示

Answer 1

我想我有一个解决方案给你。您可以使用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) => {
                
            }
        );
    }