前端实现文件下载的方法(前端实现文件下载列表)

前端实现文件下载的方法 前端实现文件下载

推荐整理分享前端实现文件下载的方法(前端实现文件下载列表)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端实现文件下载的软件,前端实现文件下载,前端实现文件下载,前端实现文件下载列表,前端实现文件下载,前端实现文件下载,前端实现文件下载功能,前端实现文件下载并修改文件名,内容如对您有帮助，希望把文章链接给更多的朋友！

前端下载一般分为两种情况，一种是后端直接给一个文件地址，通过浏览器打开就可以下载，另外一种则需要发送请求，后端返回二进制流数据，前端解析流数据，生成URL，实现下载。

一、location.href

对于一些浏览器无法识别的文件格式，可以直接再浏览器地址栏输入url即可触发浏览器的下载功能。对于单文件下载没有什么问题，但是如果下载多文件，点击过快就会重置掉前面的请求

适用场景：

get请求单文件下载window.location.href = url;二、window.open

和location.href类似

window.open(url);三、a标签

直接下载仅适用于浏览器无法识别的文件。如果是浏览器支持的文件格式，如html、jpg、png、pdf等，则不会触发文件下载，而是直接被浏览器解析并展示，这种情况下，可以使用a标签下载文件，download属性可以设置文件名。适用于单文件下载，如果下载多文件，点击过快就会重置掉前面的请求。

适用场景：

get请求单文件下载需要自定义文件名//写法1const download = (filename, url) => { let a = document.createElement('a'); a.style = 'display: none'; // 创建一个隐藏的a标签 a.download = filename; a.href = url; document.body.appendChild(a); a.click(); // 触发a标签的click事件 document.body.removeChild(a);}// 写法2<a href="/images/download.jpg" download="myFileName">

注意：有时候对于浏览器可识别的文件格式，我们还是需要直接下载的情况，可以