-
- 如果后台提供一个 URL，则用 window.open(URL) 下载
-
- 如果后台直接返回文件的二进制内容，需要前端转化一下再下载
实现方法1：Blob、ajax（axios）
Blob，Binary Large Object的缩写，代表二进制类型的大对象。 在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。
// 列表导出功能，前端向后端发送请求，返回二进制流文件
// 前端下载二进制xlsx 文件
axios({
method: 'post',
url: '/export',
responseType: 'arraybuffer'
// responseType 表示服务器响应的数据类型
// 二进制数据，要把它设为 arraybuffer
})
.then(res => {
// 假设 data 是返回来的二进制数据
const data = res.data
// 固定写法
const url = window.URL.createObjectURL(
new Blob([data],
{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}
)
)
// 创建a标签并触发click事件
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx') // 文件名、文件类型
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
实现方法2：模拟form表单提交
// 注意：如后端需要token验证，则发送请求时要在header中携带token
var params = this.searchForm // searchForm为请求所需的参数对象
var form = document.createElement('form')
form.action = `请求地址`
form.method = 'get'
// 遍历参数对象，模拟form表单提交
for (const paramsKey in params) {
var formItemDom = document.createElement('input')
formItemDom.type = 'hidden'
formItemDom.name = paramsKey
formItemDom.value = params.paramsKey
form.appendChild(formItemDom)
}
document.body.appendChild(form)
form.submit()
document.body.removeChild(form)
