const

getFileNameFromContentDisposition

(contentDisposition)

contentDisposition.match(/filename?([^])?/);return

fileNameMatch

显示进度可替换为实际的进度条console.log(下载进度${percentage}%);}});//

获取文件名let

getFileNameFromContentDisposition(response.headers[content-disposition])

defaultFileName;//

window.URL.createObjectURL(blob);//

元素并触发下载const

document.createElement(a);link.href

fileName;//

并触发点击document.body.appendChild(link);link.click();//

元素document.body.removeChild(link);//

Blob

URLwindow.URL.revokeObjectURL(blobUrl);}

catch

downloadFile(https://example.com/path/to/your/file.pdf);

从代码优化和健壮性角度出发我们可以把这三种文件名获取方式结合起来优先从响应头中提取文件名然后如果没有Content-Disposition头再从

URL

提取文件名最后可以提供一个默认文件名作为兜底方案。

此外考虑到代码可读性和可维护性上面代码做一些清晰的封装与优化处理。

文件名获取逻辑封装

getFileNameFromContentDisposition专门用于从

Content-Disposition

头部提取文件名使用正则匹配考虑了有引号和没有引号的情况。

getFileNameFromUrl用于从

URL

包围整个下载过程确保即使出现网络或其他问题错误也能被捕获并输出到控制台而不会影响页面的其他功能。

内存管理

window.URL.revokeObjectURL(blobUrl)

在文件下载后被调用释放

健壮性我们确保了即使某个步骤失败代码也能继续运行。

文件名无法从响应头或

URL

获取时始终有一个默认文件名兜底。

可扩展性如果未来需要支持更多的文件名获取逻辑或更复杂的响应头处理只需修改或添加新的获取方式即可而不会影响整体代码结构。

点击事件link.click()

操作与事件的异步性浏览器在处理用户点击和下载之间有一定的时间差移除

click

下载文件的前置条件中不依赖于文件的具体类型实际上代码对文件类型的处理是比较通用的。

这是通过以下几个方面实现的

Axios

PDF、图片、文本文件还是其他任何类型的文件代码都能正确生成文件名并完成下载。

浏览器会根据

特殊文件类型处理虽然以上代码可以处理多种类型的文件但某些文件如

HTML

文件可能会受到浏览器的默认行为影响。

例如某些文件可能会直接在浏览器中打开而不是下载。

这是由浏览器对特定

MIME

类型可能会导致文件下载或命名不正确。

因此确保服务器正确配置是关键。