VUE3+TS 下载文件流
/**
* @description: 下载文件流
* @param { string } url 请求路径
* @param { MISSING_TYPE } params 请求参数
*/
export const downloadFile = <T = MISSING_TYPE>(url: string, params: T) => {
//用于与服务器通信
const xhr = new XMLHttpRequest()
//用于打开服务器连接
xhr.open('post', url, true)
const headers = requestHeaders({
//告诉服务器发送数据格式
'Content-Type': 'application/json;charset=UTF-8',
})
//设置请求头
Object.keys(headers).forEach((item) => {
xhr.setRequestHeader(item, headers[item] as string)
})
// 存储下载文件内容
xhr.responseType = 'arraybuffer'
xhr.send(JSON.stringify(params))
xhr.onload = function () {
// 304表示资源未更改,通常用于缓存控制
if (xhr.status === 200 || xhr.status == 304) {
const blob = new Blob([xhr.response], {
//Content-disposition用于指示文件是在浏览器打开还是下载到本地
type: xhr.getResponseHeader('Content-Type') as string,
})
let name = window.decodeURI(
xhr.getResponseHeader('Content-disposition')?.split(';')[1].split('filename=')[1] || ''
)
// URL.createObjectURL创建一个指向指定File对象/Blob对象的URL、将他作为链接
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.download = name as string
a.href = url
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
//释放一个通过 URL.createObjectURL() 方法创建的 URL,防止内存泄漏
URL.revokeObjectURL(url)
}
}
}
/**
* @description: 请求头
* @param { AxiosRequestHeaders } data 请求头参数
*/
export type AxiosRequestHeaders={ [x:string]:number|string|boolean}
export const requestHeaders=(data:AxiosRequestHeaders={}):AxiosRequestHeaders=>{
let headers={
...data,
[config.token]:'token'}
return headers
}