Opening PDF file in new tab angular 4?

19
votes

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.

5
javascriptangularpdf
have you tried using window.open('filename','_blank'); – Pardeep Jain
Yes, that's the function I am using now. Only thing is I am getting the data directly from backend and not local file – k harish
yes, NP, have you tried this method? with _blank? – Pardeep Jain
Yes, the window just opens and closes immediately in chrome – k harish
Can you provide a minimal working example, please? Otherwise it's difficult to find issues. – FranzHuber23

5 Answers

45
votes

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');
});
10
votes

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');

0
votes

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

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

0
votes

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.

0
votes

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