b5的下载的demo在哪_从 bug 中学习文件下载

最新推荐文章于 2024-04-27 04:43:08 发布

元贝驾考

最新推荐文章于 2024-04-27 04:43:08 发布

阅读量1.6k

点赞数

文章标签： b5的下载的demo在哪

本文链接：https://blog.csdn.net/weixin_42505252/article/details/112110255

版权

背景

某日接到用户反馈，说某个模块下载文件失败，查看用户截图后确认问题如下：

系统：windows
浏览器：搜狗（发现只有该浏览器有问题）
下载框中看到，浏览器没有正确识别文件名称及后缀，而是把接口路径的最后一段作为文件名，导致无法打开文件

经过排查发现，与 a 标签的 download 属性的设置有关，这就引出了问题，下载文件是如何实现的，下载文件名是如何确定的，于是有了这篇总结，下面开始进入正题 (●ﾟωﾟ●)

业务代码中前端下载文件的逻辑是参考 file-saver 实现的

function downloadFile(url: string, fileName: string = '') {
  const a = document.createElement('a');
  a.download = fileName;
  a.rel = 'noopener'; // tabnabbing, 防止打开的窗口获取操作源窗口的 window 对象
  a.href = url;
  a.target = '_blank';
  // `a.click()` doesn't work for all browsers (#465)
  try {
    a.dispatchEvent(new MouseEvent('click'));
  } catch (e) {
    const evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(
      'click',
      true,
      true,
      window,
      0,
      0,
      0,
      80,
      20,
      false,
      false,
      false,
      false,
      0,
      null
    );
    a.dispatchEvent(evt);
  }
}

后端下载文件接口的响应头如下：

Content-Disposition: attachment; filename*=UTF-8''%E6%B5%8B%E8%AF%95.xlsx
Content-Type: application/octet-stream

<a> download vs Content-Disposition

<a> download 属性

<a>: The Anchor elementdeveloper.mozilla.org

功能

下载目标链接而不是导航到目标链接

使用场景

对于浏览器可识别的文件格式，如图片，txt，pdf 等，使用 download 属性可实现文件下载，否则会在浏览器窗口中打开文件预览

使用方式

<a href="xxx" download>xxx</> // 表示超链接用于下载而不是跳转
<a href="xxx" download="xxx.xx">xxx</> // 指定下载文件的名字

使用限制

同域链接
data:URL
blob:URL

download 属性为空时，filename 的确定

filename: Content-Disposition 的 filename 字段 / The final segment in the URL path
extension: Content-Type / start of the data:URL / Blob.type for the blob:URL

注：当 Content-Disposition 的 filename 与 download 值不同时，filename 的优先级更高The attribute can furthermore be given a value, to specify the file name that user agents are to use when storing the resource in a file system. This value can be overridden by the `Content-Disposition` HTTP header's filename parameters.

Content-Disposition

作为 HTTP 响应头时，语法如下：

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"; filename*=ext-value

Disposition Type

inline: 表示响应作为网页或网页的一部分在浏览器中展示
attachment: 表示响应作为附件下载并保存到本地

Filename

filename
- 支持 ISO-8859-1 字符集
- 作为保存文件时呈现给用户的文件名
- 当 Disposition Type 为 inline 时，作为用户后续保存文件时的文件名称（如右键另存为的情况）
filename*
- 与 filename 的区别是，filename * 支持 ISO-8859-1 字符集之外的字符
- 按照 RFC 5987 中的编码方式编码
- 当与 filename 同时存在时，filename* 的优先级更高