Open a PDF in a new tab AND download with file name in Angular

Issue

In Angular, I need to open a PDF in a new tab and allow the user to download it with a specific name (Example.pdf). The code below downloads the PDF however doesn’t open a new tab (target=_blank is not working). Any ideas how to fix this?

show(blob){
    var fileURL: any = URL.createObjectURL(blob);
    var a = document.createElement("a");
    a.href = fileURL;
    a.target = '_blank';
    a.download = "Example.pdf";
    a.click();
}

Solution

Don’t set the download attribute if you would like to open the PDF in new tab.

  public show(blob){
    var fileURL: any = URL.createObjectURL(blob);
    var a = document.createElement("a");
    a.href = fileURL;
    a.target = '_blank';
    // Don't set download attribute
    // a.download = "Example.pdf";
    a.click();
}

However, in new tab, when user tries to download the file, user will see random string instead of a fileName.
Explanation here: https://stackoverflow.com/a/41947861/5171009

Answered By – Prabh

Answer Checked By – Cary Denson (AngularFixing Admin)