Opening PDF file in new tab angular 4?

Question

I tried opening a PDF file using the window.open(), but the window opens and closes automatically and the file is downloaded like any other file. How to make the pdf file open in new tab? There are no ad blockers installed.

Yes, that's the function I am using now. Only thing is I am getting the data directly from backend and not local file — Harish Krishnan, Jul 06 '18 at 06:33
Check value of `Content-Disposition` header. https://stackoverflow.com/questions/6293893/how-do-i-force-files-to-open-in-the-browser-instead-of-downloading-pdf — barbsan, Jul 06 '18 at 06:42
Can you provide a minimal working example, please? Otherwise it's difficult to find issues. — FranzHuber23, Jul 06 '18 at 06:59

score 52 · Accepted Answer · edited Nov 08 '19 at 15:30

52

From @barbsan idea, I changed the http headers and received a blob and used that to display the blob as pdf using window.open(). It worked.

Here is my sample code.

In service file

downloadPDF(url): any {
    const options = { responseType: ResponseContentType.Blob  };
    return this.http.get(url, options).map(
    (res) => {
        return new Blob([res.blob()], { type: 'application/pdf' });
    });
  }

In component file

this.dataService.downloadPDF(url).subscribe(res => {
  const fileURL = URL.createObjectURL(res);
  window.open(fileURL, '_blank');
});

edited Nov 08 '19 at 15:30

Willi Mentzel

27,862
20
113
121

answered Jul 06 '18 at 07:20

Harish Krishnan

1,693
4
17
25

14

Be careful if you're using an ad-blocker extension. Ad-blockers block blob URLs by default. As a result, e.g. in Chrome and Firefox, with the uBlock Origin extension, it would try to open the new window and close it automatically. You can read more about here: https://stackoverflow.com/questions/51272781/why-do-ad-blockers-block-blobs – AsGoodAsItGets Sep 11 '18 at 15:15
Also, if you care about this working in IE too, read this: https://stackoverflow.com/questions/24007073/open-links-made-by-createobjecturl-in-ie11 – AsGoodAsItGets Sep 11 '18 at 15:59
3

How to set file name while opening file in new tab with above approach? – Nagaraja JB Jun 10 '19 at 11:24
1

any idea how to set name of new tab when opening the PDF? – Pathik Vejani Sep 11 '19 at 10:59
1

can any one provide make a file name opening file in new tab with above approach – May 12 '20 at 12:29
Does this require the PDF to be publicly available? E.g. without authorization? – Jeppe May 21 '20 at 21:27

score 12 · Answer 2 · edited Nov 08 '19 at 15:30

12

One liner solution to open a pdf file in new tab. You just need to have file url and use this function on button click.

window.open(url, '_blank');

edited Nov 08 '19 at 15:30

Willi Mentzel

27,862
20
113
121

answered Jul 17 '19 at 13:22

Waleed Shahzaib

1,526
2
18
34

score 1 · Answer 3 · answered May 20 '20 at 17:07

1

you can display pdf fle in new tab by the line:

window.open(fileUrl, '_blank');

The fileUrl is a variable that contains the file path.

answered May 20 '20 at 17:07

lea

11
2

Pavlo Kozachuk · Answer 4 · 2022-06-09T13:24:04.063

1

For the Angular 13 version

downloadPDF(url: string): Observable<Blob> {
   const options = { responseType: 'blob' as 'json' };
   return this.httpClient
  .get<Blob>(url, options)
  .pipe(map(res => new Blob([res], { type: 'application/pdf' })));
}

edited Jun 09 '22 at 13:24

answered Jun 09 '22 at 13:14

Pavlo Kozachuk

244
3
7

score 0 · Answer 5 · answered Mar 15 '20 at 16:54

0

you need user the "target="_blank" in the tag ;

exemple: <a target="_blank" href="https://www.google.com/"> </a>

answered Mar 15 '20 at 16:54

Hoiama Rodrigues

318
4
4

3

Hi Hoiama, welcome to StackOverflow! Unfortunately, your answer doesn't address the original question, which was to use explicitly `window.open()`. Please make sure to read the question and any answers thoroughly, because it's easy to miss something like this! – Ruben Helsloot Mar 15 '20 at 17:19

score 0 · Answer 6 · answered Mar 08 '21 at 23:10

How to make it work in Angular 10, changes just a little bit, this in the service file from @K Harish answer

import { map } from 'rxjs/operators';


    return this.http.get(url, options).pipe(map(
    (res) => {
        return new Blob([res], { type: 'application/pdf' });
    }));

Opening PDF file in new tab angular 4?

6 Answers6

Linked