2

I am reading a pdf in the server (SpringBoot) and return it as a byte array to be opened in a new tab. On the client-side (Angular) I am consuming it as a blob. I am then trying to open the pdf in a new tab

service.ts file

getPdf(httpHeaders: HttpHeaders): Observable<any> {
    return this.http.get(this.getServerUrl() + 'dummypdf', {
        observe: 'response',
        responseType: 'blob',
        headers: httpHeaders
    });
}

Component.ts file

openPdf(){
    this.service.getPdf(generateRequestId()).subscribe(file => {
        let blobData = new Blob([file.body], {
            type: 'application/pdf'
        });
        let fileData = new File([file.body], "name", {type: 'application/pdf'});
        let fileURL = window.URL.createObjectURL(fileData);
        window.open(fileURL,"_blank")
    })
}

I am able to open the pdf in the new tab. Everything is fine. But the blob URL appears as such

blob:http://localhost:4200/ba35a67c-571e-4450-bda4-b438dc8d6d8e 

I do understand that it is because of the memory location from where it is reading and also it is not customizable.

My question is, Is there any alternative approach to this. Like perhaps not consume it as a blob or not sending it as a byte array from the server?

iamdhavalparmar
  • 1,090
  • 6
  • 23
  • Can you give a try downloading and then opening the same file.. – Romesh Mar 03 '21 at 05:08
  • Thanks for the reply. But then in a use case where a user would like to view multiple pdfs to just view, it will unnecessary download the files. – ullas kakanadan Mar 03 '21 at 05:20
  • Is it necessary to show pdf in different tab? Can you try with be in same tab's some popup view – Romesh Mar 03 '21 at 05:26
  • Instead of streaming the file as a blob, can you try creating and saving file server side in a MEDIA/STATIC location and save that path in your database to open it as a PDF on the client side as a static file. – Sunny Mar 03 '21 at 05:27
  • 1
    @Romesh No. An iframe is one option perhaps, but recent browsers block the iframes. – ullas kakanadan Mar 03 '21 at 07:31
  • @Sunny - Not sure. Need to check if it is possible. I was thinking something more on client-side – ullas kakanadan Mar 03 '21 at 07:31

0 Answers0