CODEWITHSUNDEEP
javascripthtmlhttp-headers
Prakash Raman
Prakash Raman

Reputation: 13933

how to set content-disposition = attachment via javascript?

How can I set content-disposition = attachment via javascript?

Basically, I would like to force a "SaveAs" operation after a page has loaded via Javascript, using Firefox.

How can I do this ?

Upvotes: 21

Views: 54096

Answers (3)

fregante
fregante

Reputation: 31708

HTML only: use the download attribute.

<a download href="http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg">Download</a>

Javascript only: you can save any file with this code:

function saveAs(uri) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.setAttribute('download', true);

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);
    } else {
        window.open(uri);
    }
}

var file = 'http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg';
saveAs(file);

Upvotes: 17

abhishek kasana
abhishek kasana

Reputation: 1522

1.Use Anchor "download"(HTML5) attribute

<a href='abc.pdf' download>Click Here</a>

2.Create href programmatically using js,

const link = document.createElement('a');
link.href = '/xyz/abc.pdf';
link.download = "file.pdf";
link.dispatchEvent(new MouseEvent('click'));

According to Mozilla doc Anchor element, download attribute(HTML5) instructs browsers to download a URL instead of navigating to it.

Important Notes:

  • This attribute only works for same-origin URLs.
  • Although HTTP(s) URLs need to be in the same-origin, blob: URLs and data: URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded.

So the above js method to create anchor element dynamically and using it download the file will only work for the same origin files i.e There are two ways to handle this problem ->

  • Client-side
  • Server-side

Client-side solution:->

A work around for this problem, refrenced in second Note i.e a blob object can be used, with the help of fetch js API

url = 'https://aws.something/abc.pdf';

fetch(url, {
      method: 'GET',
    }).then(function(resp) {
      return resp.blob();
    }).then(function(blob) {
      const newBlob = new Blob([blob], { type: "application/pdf", charset: "UTF-8" })

      // 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;
      }
      const data = window.URL.createObjectURL(newBlob);
      const link = document.createElement('a');
      link.dataType = "json";
      link.href = data;
      link.download = "file.pdf";
      link.dispatchEvent(new MouseEvent('click'));
      setTimeout(function () {
        // For Firefox it is necessary to delay revoking the ObjectURL
        window.URL.revokeObjectURL(data), 60
      });
    });

Server-side solution:->

The other option is if you can control the server side response headers then this may be the best option.

In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally. e.g

Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

For a file hosted on AWS , its response headers can be edited, these can be changed in meta data, add the content disposition header in the meta data in the file or the folder propertities, add key as content-disposition and value as attachment,

content-disposition : attachment

Now whenever this file is hit from a browser it would always download instead of opening, now if u use this file link in a anchor tag it would be downloaded directly with use of download html tag.

Upvotes: 5

nnevala
nnevala

Reputation: 5997

Content-Disposition is a response header, ie. the server must return it. You can't achieve this with client-side javascript.

Upvotes: 32

Related Questions