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

Question

我有一个 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' 然后它可以显示

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) => {
                
            }
        );
    }