1 标签or点击事件

标签下载

<a href="xxxxx">
或
<a href="xxxxx" download="xxxx">href：文件的绝对/相对地址
download: 文件名（可省略，省略后浏览器自动识别源文件名）

Tip：

跨域情况下，不能下载浏览器可浏览的文件，例如图片。
兼容性问题，老的浏览器不支持。
不能进行鉴权。

通过点击事件下载

function download(url, fileName){const a = document.createElement('a')a.style.display = 'none'a.href = urla.download = fileNamedocument.body.appendChild(a)a.click()document.body.removeChild(a)
}

2 location.href 或 window.open

function download(url, fileName){location.href = url
}
或
function download(url, fileName){window.open(url)
}

优点

简单方便直接。

缺点

会出现 url 长度限制问题。
需要注意 url 编码问题。
浏览器可直接浏览的文件类型是不提供下载的，如 txt、png、jpg、gif 等。
不能添加 header，也就不能进行鉴权。
无法知道下载的进度。

3 通过表单

function download(url, fileName){// 创建表单const formEle = document.createElement('form')formEle.action = urlformEle.method = 'get'formEle.style.display = 'none'// 创建 input，用于传参const formItem = document.createElement('input')formItem.value = fileNameformItem.name = 'fileName'// 插入到页面中formEle.appendChild(formItem)document.body.appendChild(formEle)formEle.submit()document.body.removeChild(formEle)
}

优点

传统方式，兼容性好，不会出现URL长度限制问题。

缺点

无法知道下载的进度。
浏览器可直接浏览的文件类型是不提供下载的，如 txt、png、jpg、gif 等。

4 Blob 对象

进行下载的思路很简单：发请求获取二进制数据，转化为 Blob 对象，利用 URL.createObjectUrl 生成 url 地址，赋值在 a 标签的 href 属性上，结合 download 进行下载。

相关资料：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

4.1 请求时设置了 responseType = 'blob’

// reponse - 接口返回的二进制数据
// fileName - 文件名
const url = URL.createObjectURL(reponse)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

4.2 请求时没有设置 responseType

// reponse - 接口返回的二进制数据
// fileName - 文件名
const blob = new Blob([response], {type: 'xxx'}) // type: 'blob'
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

优点

能下载浏览器可浏览的文件。
可设置header，也就可添加鉴权信息。

缺点

兼容性问题，IE10以下不可用；Safari浏览器可以留意下使用情况。

5 DataURL

相关资料：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

请求时需要设置 responseType = 'blob’

// reponse - 接口返回的二进制数据
// fileName - 文件名
const fileReader = new FileReader()
fileReader.readAsDataURL(response)
fileReader.onload = function(){const a = document.createElement('a')a.style.display = 'none'a.href = this.resulta.download = fileNamedocument.body.appendChild(a)a.click()document.body.removeChild(a)
}

优点

能下载浏览器可浏览的文件。
可设置header，也就可添加鉴权信息。

缺点

兼容性问题，IE10以下不可用。

参考文献

前端下载文件的5种方法的对比

Web前端下载文件的几种常见方式相关推荐

前端下载文件的几种方式
前端下载文件的几种方式前言 1. window.open 2. window.location.href 3. a标签 4. iframe 5. blob 前言总结下载文件的几种方式,文件都是通过 ...
记录一下前端针对下载文件的两种请求方式
之前做了很多下载文件的接口都没习惯进行记录,现在开始规范自己,让自己养成一个随手保存代码的好习惯.写的不足之处请指出,会改正. 说一下前端下载文件常用的两种方式,get请求和post请求 get请求相 ...
web实现数据交互的几种常见方式
前言在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...
web前端换行代码的几种实现方式！
刚刚入门前端的小伙伴肯定有遇到过需要将一整段文字换行显示的情况,其实有好几种方式可以实现,小千今天就来给大家介绍几种常见的方式. 1.首先第一种方式就是在想要换行的文本处添加一个 "< ...
vue前端下载文件的2种方式
以下两种方式下载适用于后端返回了文件的url下载地址 var x = new XMLHttpRequest();x.open("GET", url, true);//url为文件的 ...
vue前端下载文件的几种方式
前端经常需要通过后端给的文件流下载各种文件,比如excel,word,压缩包等方式一:使用 window.location.href 这里限于使用get方式 window.location.href ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
下载文件时两种返回方式
返回文件流 public void downloadFloodInfo(HttpServletRequest request, HttpServletResponse response) {Strin ...
Windows从web下载文件的几种方式
最近搞app自动化测试,需要自动从网页上下载apk用于测试,顺便学习了几种从web下载文件的方式. 一.PowerShell DownloadFile 命令 PowerShell 是一种winodws ...

Web前端下载文件的几种常见方式