如何通过javascript设置content-disposition = attachment？

Question

如何通过javascript设置content-disposition = attachment？

基本上，我想使用Firefox在页面通过Javascript加载后强制执行“另存为”操作。

我该怎么做呢？

Answer 1

Content-Disposition是一个，即。服务器必须返回它。你不能用客户端的javascript做到这一点。

Answer 2

基于Firefox和Chromium的浏览器支持download attribute。如果您现在需要更好的兼容性，可以使用基于闪存的Downloadify作为备用。

仅限HTML：使用download属性：

​

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

​

仅限Javascript：您可以使用以下代码保存任何文件：

​

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

​

Answer 3

1.使用Anchor“下载”(HTML5)属性

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

2.使用js以编程方式创建href，

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

根据Mozilla doc，下载属性(HTML5)指示浏览器下载Anchor element而不是导航到它。

重要说明：

• 此属性仅适用于同源URL。
• 虽然HTTP URL需要位于同源URL中，但允许使用blob: URL和data: URL下载由JavaScript生成的内容，例如在图像编辑器Web应用程序中创建的图片。

因此，上面的js方法动态创建锚元素并使用它下载文件将只适用于相同的源文件，即有两种方法来处理这个问题->

• 客户端
• Server-side

客户端方案：->

在fetch js API的帮助下，可以使用blob对象，这是第二个注释中提到的解决方法

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

服务器端解决方案：->

另一种选择是，如果您可以控制服务器端响应头，那么这可能是最好的选择。

在常规的超文本传输协议响应中，Content-Disposition响应头是指示是否期望在浏览器中以内联方式显示内容的头部，即，作为网页或网页的一部分，或者作为本地下载并保存的附件。e.g

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

对于托管在AWS上的文件，可以编辑其响应头，这些响应头可以在元数据中更改，在文件的元数据中添加内容配置头或文件夹属性，添加关键字作为内容配置和值作为附件，

content-disposition : attachment

现在，当这个文件从浏览器中被点击时，它总是下载而不是打开，现在如果你在锚标签中使用这个文件链接，它将使用下载html标签直接下载。