浏览器实现文件下载

2024年5月29日 252次阅读 来源: _Captain_

浏览器中输入一个URL后浏览器是如何判断是要浏览还是要下载呢？这主要和http协议Response Header中的两个字段相关：

Content-Type

Content-Type主要标识文件的类型，浏览器在默认情况下会展示返回的文件内容，但是有一个值比较特殊：application/octet-stream，这表示未知的二进制类型文件，为了安全起见，浏览器会将其存储到磁盘，从而实现下载的功能。这样实现的下载功能有一个缺点是浏览器并不知道下载文件的类型，所以对一些特定类型文件的处理可能就会失效。此方法实现下载其实不太正经，正经方法看下面的Content-Disposition。

详细介绍

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

Content-Disposition

Content-Disposition是用来声明http协议返回的内容是打开还是下载。这个字段可以设置的值有：

  • ontent-Disposition: inline （默认）
  • Content-Disposition: attachment
  • Content-Disposition: attachment; filename=“filename.jpg”

其中inline代表在浏览器中显示，attachment代表下载到磁盘，filename可以设置文件名。

Content-Disposition字段的优点是并不影响Content-Type字段，Content-Type还可以正确的标识为文件类型。

详细介绍

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition

应用

在服务器正确设置上文介绍的Response Header的情况下使用此函数，通过模拟点击a标签的方法来模拟下载就实现了一个下载函数

function download(url, fileName) { 
  const aElement = document.createElement('a');
  document.body.appendChild(aElement);
  aElement.style.display = 'none';
  aElement.href = url;
  aElement.download = fileName;
  aElement.click();
  document.body.removeChild(aElement);
}
    原文作者：_Captain_
    原文地址: https://blog.csdn.net/qq_39807732/article/details/116061000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞