CODEWITHSUNDEEP
javascriptangularpdf
Harish Krishnan
Harish Krishnan

Reputation: 1823

Opening PDF file in new tab angular 4?

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.

Upvotes: 22

Views: 103332

Answers (6)

Pavlo Kozachuk
Pavlo Kozachuk

Reputation: 283

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

Upvotes: 1

Ulises Moreno
Ulises Moreno

Reputation: 47

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

Upvotes: 0

lea
lea

Reputation: 11

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.

Upvotes: 1

Hoiama Rodrigues
Hoiama Rodrigues

Reputation: 346

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

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

Upvotes: 0

Harish Krishnan
Harish Krishnan

Reputation: 1823

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

Upvotes: 54

Waleed Shahzaib
Waleed Shahzaib

Reputation: 1706

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

Upvotes: 14

Related Questions