vue使用文件流进行下载
在 Vue 项目中,经常会遇到下载文件流的情况,使用 new Blob二进制进行文件下载功能(vue后台返回文件流下载导出函数封装、调用示例),type不同下载的文件格式也不同,,可根据自己项目场景更换 new Blob() 的 type 即可。
·
在 Vue 项目中,经常会遇到下载文件流的情况,使用 new Blob二进制进行文件下载功能(vue后台返回文件流下载导出函数封装、调用示例),type不同下载的文件格式也不同,这边本文章下载的是xlsx文件,可根据自己项目场景更换 new Blob() 的 type 即可
这边带大家如何封装使用(直接C/V就可以用了)
new Blob(): Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理_L_羽鹏的博客-CSDN博客
import axios from 'axios'
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL:"http://localhost:3000",
// 超时
timeout:2000
})
// 拦截器
......
......
//导出方法
/*
download(url, params, filename)
第一个参数是请求的api
第二个参数是请求参数
第三个参数是导出的文件名
*/
export function download(url, params, filename) {
//数据请求
return service.post(url, params, {
transformRequest: [(params) => {
return tansParams(params)
}],
// 请求头
headers: {
'xxx': 'xxx'
},
responseType: 'blob'
}).then((data) => {
const content = data
const blob = new Blob([content], {
// 下载的文件格式自己在这边更改type的值就好了
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
elink.download = filename
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, filename)
}
}).catch((r) => {
console.error(r)
})
}
更多推荐
已为社区贡献3条内容
所有评论(0)