重要说明：

Question

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

基本上，我希望在使用Firefox通过Javascript加载页面后强制执行“SaveAs”操作。

我该怎么做？

Answer 1

内容 - 处置是response header，即。服务器必须返回它。您无法通过客户端javascript实现此目的。

Answer 2

Firefox和基于Chromium的浏览器支持download attribute。如果您需要更好的兼容性 now ，请使用基于Flash的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。使用锚点“下载”（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文档Anchor element，download属性（HTML5）指示浏览器下载URL而不是导航至该URL。

重要说明：

此属性仅适用于同源网址。
尽管HTTP URL必须使用相同的来源，blob：URL和数据：允许使用URL，以便可以下载JavaScript生成的内容，例如在图像编辑器Web应用程序中创建的图片。

因此上述js方法可以动态创建锚元素并使用它下载文件，该方法仅适用于相同的原始文件，即有两种方法可以解决此问题->

客户端
服务器端

客户端解决方案：->

此问题的解决方法，在第二个注释中有所说明，即可以在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
      });
    });

服务器端解决方案：->

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

在常规HTTP响应中，Content-Disposition响应标头是一个标头，指示是否希望在浏览器中内联显示内容，即作为网页还是作为网页的一部分，或者作为附件，可以在本地下载和保存。例如

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

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

content-disposition : attachment

现在，无论何时从浏览器中点击此文件，它都将始终下载而不是打开，现在，如果您在锚标记中使用此文件链接，则将使用下载html标签直接下载该文件。

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

3 个答案:

重要说明：

客户端解决方案：->

服务器端解决方案：->