How to download image from URL (using blob) in angular 5

Question

I have few links in my web application , some of them have content type application/pdf and some image/jpeg on click downloads/saves file (respective type)

I have an issue while downloading images, but the following code works perfectly for application/pdf,

I need help in downloading images from URL. I tried changing Content type and response type to image/jpeg but it's not working.

downloadDocFile(fileLocation, fileName) {

var fileNAme = fileName;
var url = fileLocation;

let headerD = this.service.getHeaderDict();

const headerDict = {
  'Content-Type': 'application/pdf',
  'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
  'Access-Control-Allow-Headers': 'Authorization, X-Requested-With, Content-Type, Origin, Accept, X-clientid, X-locale, X-loggedin, X-version',
  'Access-Control-Allow-Credentials': true
}

const requestOptions = {
  headers: new Headers(headerDict), responseType: ResponseContentType.Blob
};

const proxyurl = "https://cors-anywhere.herokuapp.com/";

this.http.get(proxyurl +url,requestOptions).subscribe(
  res => {
    const data: Blob = new Blob([res.blob()], { type: 'application/pdf' });
    saveAs(data, fileNAme);
 })}

service.ts

getHeaderDict(): Object {
     return this.headerDict
}

Can u write fileName examples both image and pdf

Cagri Tacyildiz
– Cagri Tacyildiz

2020-05-25 08:05:06 +00:00
Commented May 25, 2020 at 8:05 — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 25, 2020 at 8:05
have u checked this link

Venkatesh K
– Venkatesh K

2020-05-25 08:20:13 +00:00
Commented May 25, 2020 at 8:20 — Venkatesh K
– Venkatesh K, Commented May 25, 2020 at 8:20

emrebaris · Accepted Answer · 2020-05-25 07:56:50Z

1

  downloadDocument(fileName) {
    this.documentService.downloadDocument(fileName).subscribe(resFile => {
      var newBlob = new Blob([resFile]);
      // IE doesn't allow using a blob object directly as link href
      // instead it is necessary to use msSaveOrOpenBlob
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
      }
      // For other browsers: 
      // Create a link pointing to the ObjectURL containing the blob.
      const data = window.URL.createObjectURL(newBlob);
      var link = document.createElement('a');
      link.href = data;
      link.download = fileName;
      // this is necessary as link.click() does not work on the latest firefox
      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
    })
  }

answered May 25, 2020 at 7:56

emrebaris

865 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umesh C Over a year ago

This solution didn't work for me, it is downloading as jpeg file but not opening (error : File format not supported)

Shijil Narayanan · Accepted Answer · 2020-05-26 15:27:13Z

0

Try this,

this.http.get(proxyurl +url, {
  responseType: 'blob' as 'json',
  headers: new HttpHeaders().append('Content-Type', 'application/json')
}).subscribe(data => saveAs(data, fileNAme));

edited May 26, 2020 at 15:27

answered May 25, 2020 at 8:18

Shijil Narayanan

1,01910 silver badges21 bronze badges

1 Comment

Umesh C Over a year ago

Having issue with this approach ( String is not assignable to responseType )

Collectives™ on Stack Overflow

How to download image from URL (using blob) in angular 5

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related