首先，axios实例在发起下载文件请求时，应该配置responseType: ‘blob’，例如：
// axios发起下载文档请求
export const downloadDoc = (id: string) => {return request.get(`/downloadDoc?id=${id}`, {// 参考官方文档https://www.axios-http.cn/docs/req_config，responseType: 'blob'是浏览器专属responseType: 'blob'}) as Promise<Blob>
}
// 下载文件通用函数
export function download(filename: string, data: Blob): void {let downloadUrl = window.URL.createObjectURL(data) //创建下载的链接let anchor = document.createElement('a') // 通过a标签来下载anchor.href = downloadUrlanchor.download = filename // download属性决定下载文件名anchor.click() // //点击下载window.URL.revokeObjectURL(downloadUrl) // 下载后释放Blob对象
}
download的属性是HTML5新增的属性 href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx…那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf…浏览器就会采取预览模式；所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
同时，axios响应拦截器应该如下配置：
// 响应拦截器
request.interceptors.response.use((response: AxiosResponse) => {// 如果是下载文件，直接返回data就行了if (response.headers['content-type'] === "application/octet-stream") {return response.data}...}
}
最终，在进行下载文件的地方
// 点击下载
const clickDownload = async () => {if (props.nowType !== KnowledgeType.RecycleBin) {try {const res = await downloadDoc(knowledgeStore.knowledgeList[props.item].id)download(docName, res)} catch {ElMessage.error('下载失败')}}
}
顺带一提上传文件的方法：设置’Content-Type’: 'multipart/form-data’即可，然后表单参数里放文件
export const postUpload = (data: File) => {return request.post('/upload', {file: data}, {headers: {'Content-Type': 'multipart/form-data'}})
}
