Download pdf from a URL instead of opening in a new tab

Question

Is there any possible way in Angular 10 / Typescript to download a PDF from a URL instead of opening it in a new tab?

Sample URL: http://www.africau.edu/images/default/sample.pdf

Answer 1

If you need to download and save it an anchor tag with the download attribute as @sasa suggests should suffice. Here's some sample code for Angular.

<a [href]="url" download>Click to download</a>

If you'd like to programatically download the file you need to use the HttpClient from Angular:

Install this dependency to make your life easier:

npm install file-saver --save
npm install -D @types/file-saver

And have a generic service

import {saveAs} from 'file-saver'
@Injectable({ providedIn: 'root' })
export class DownloadService {

  constructor(private http: HttpClient) {}

  downloadUrl(url: string, filename: string): Observable<Blob> {
    return this.http.get(url, {responseType: 'blob' }).pipe(
      map(res => res.blob()),
      tap(blob => saveAs(blob, filename))
    )
  }
}

Notice that calling the function won't download the file; you will need to subscribe to the Observable<Blob> returned or transform it into a Promise and await it

Answer 2

Sorry if I'm being too obvious but the download attribute to the a tag doesn't work?

Answer 3

You need to set the content type as application/octet-stream typically to inform the browser that it should download it instead of displaying it in a tab. Not sure specifically how in Angular 10 / Typescript: