html中设置content-disposition,html - how to set content-disposition = attachment via javascript? - Stac...

1.Use Anchor "download"(HTML5) attribute

Click Here

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.