I have an API which is returning uploaded file as blob. When I try to bind src with blob URL then it does not show anything, however, when I try to bind direct URL then it can show PDF file. Here is my code given below.
My TS code

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>

Note: if I set myBlobURL URL to 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' then it can display

CodePudding user response：

Try this.

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>

CodePudding user response：

I think I have a solution for you. You can use ArrayBuffer. @N.F. Code is correct, however, you said that you got error in the line => this.pdfSrc = new Uint8Array(fileReader.result);
So, change the line into => this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);.
Finally, your ts code should look like below=>

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