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

Question

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();
}

Are you getting any error in console? – Bijay Yadav Nov 06 '19 at 00:39 — Bijay Yadav, Nov 06 '19 at 00:39

score 6 · Accepted Answer · answered Nov 06 '19 at 01:01

6

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 Nov 06 '19 at 01:01

Prabh

909
5
9

2

the bottom line is: it's not possible – ps0604 Nov 06 '19 at 08:27
1

it is possible @ps0604, `a.setAttribute('target', '_blank');` // this will open file in new tab `a.href = `${filename}`; ` // this will set the file name you want – Pinka Apr 04 '21 at 15:23
1

@Pinka where i would give the file url ? – Prashant Agrawal Jul 29 '21 at 10:27

score 0 · Answer 2 · answered Feb 21 '22 at 06:53

I solved it using the method below if anyone is interested in a different method.

Service code:

 fetchDocument(fileUrl) {
        //pass document url to the service
        return this.http.post(
          `http://localhost:3000/mydocuments/${fileUrl}`,
          {},
          {
            responseType: 'arraybuffer',
          }
        );
      }

In your component ts file:

downloadPDF(content) {
    //make a call to the service passing in document url
    this.service.fetchDocument(fileUrl)
      .subscribe(
        (response: any) => {
          let array = new Uint8Array(response);

          //service returns an array buffer so convert array buffer to blob
          let file = new Blob([array], { type: 'application/pdf' });
          let fileURL = URL.createObjectURL(file);
          window.open(fileURL);
        },
        (err) => {
          console.error(err);
        }
      );
  }

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

2 Answers2