内容处置是 response header 也就是说,服务器必须返回它。使用客户端JavaScript无法实现这一点。

基于Firefox和Chromium的浏览器支持 download attribute . 如果你需要更好的兼容性 现在 ,使用基于Flash的 Downloadify 作为后退。

仅HTML: 使用 下载 属性:

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

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 Doc Anchor element ,下载属性(HTML5)指示浏览器下载URL,而不是导航到它。

重要提示:

• 此属性仅适用于相同的原始URL。
• 虽然HTTP(S)URL需要在同一个源中,但允许使用blob:urls和data:urls,以便可以下载由javascript生成的内容,如在图像编辑器Web应用程序中创建的图片。

因此,上面的JS方法动态地创建锚元素,并使用它下载该文件,将只适用于相同的源文件,即 有两种方法可以解决这个问题->

• 客户端
• 服务器端

客户端解决方案:->

在获取JSAPI的帮助下,可以使用第二个注释(即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标记。