在项目中，我们经常会遇到导出列表内容或者下载文件的需求。下面这篇文章主要介绍axios前端使用下载文件的相关信息。通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
1、需求描述2、问题分析3、解决方案4、代码实现总结
1、需求描述
在与前端分开开发的项目中，无论前端使用的是哪个框架Vue还是React，发送HTTP请求都会一直使用Ajax异步请求。Axios用于在许多项目中发送请求。但是在使用axios实现下载功能时，经常会出现以下问题。
当前客户端直接使用axios请求api接口下载文件时，状态码返回200，但得到的数据是一堆乱码。效果如下：
2、问题分析
其实下载是浏览器的内置事件。浏览器的GET请求(frame，a)和POST请求(form)具有以下特征：
响应将由浏览器处理；响应内容可以是二进制文件、字符串等。
但是AJAX请求是不同的：
响应将由Javascript处理；响应内容只能接收字符串才能继续处理。
所以AJAX本身无法触发浏览器的下载功能。
3、解决方案
为了在axios的配置中配置responseType: ‘blob’(非常关键)，服务器读取文件，并以内容类型的格式将其返回到前端：“应用程序/八位字节流”。前端收到数据后，用Blob接收数据，创建一个A标签下载。
对象的类型取决于responseType的值。当值为“blob”时，表示响应是包含二进制数据的Blob对象。
在使用axios发起请求之前，首先要了解如何在axios中使用responseType属性。以axios最常用的get和post请求为例。传递参数时，这两种请求方法也不同：
在get请求当中，config 是第二个参数，而到了 post 里 config 变成了第三个参数，这是传递 responseType 第一个需要注意的地方。
4、代码实现
后端实现以express为例：
//这里以快递为例
const fs=require('fs ')
const express=require('express ')
const body parser=require(' body-parser ')
const app=express()
app . use(body parser . urlencoded({ extended:false }))
app.use(bodyParser.json())
//以帖子提交为例
app.post('/info/download '，function(req，res) {
常量文件路径='。/myfile/test.zip '
const fileName='test.zip '
资源集({
“内容类型”:“应用程序/八位字节流”，
内容-处置':'附件；filename=' encodeURI(文件名)
})
fs.createReadStream(文件路径)。管道(res)
})
app.listen(3000)
前端使用axios api接口请求下载文件时，区分不同请求方式的使用很重要。语法如下：
//axios应该像下面这样设置reponseType
const url='/info/download '
//get、delete、head等请求
axios.get(url，{params: {}，responseType: 'blob'})。然后((res)={})。catch((err)={})
//post、put、patch等请求
axios.post(url，{.params}，{responseType: 'blob'})。然后((res)={})。catch((err)={})
前端解析数据流，主要使用Blob对象接收。示例代码如下：
//以前面的post请求为例
axios.post(url，{.someData}，{responseType: 'blob'})。然后((res)={
const { data，headers }=res
const fileName=headers[' content-disposition ']。替换(/\ w；文件名=(。*)/, '$1')
//这里返回json文件时，数据需要先经过JSON.stringify处理，其他类型的文件不需要处理。
//const Blob=new Blob([JSON . stringify(data)]，)
const blob=new Blob([data]，{type: headers['content-type']})
让dom=document.createElement('a ')
设url=window。URL.createObjectURL(blob)
dom.href=url
dom.download=decodeURI(文件名)
dom.style.display='none '
doc . body . appendchild(DOM)
dom.click()
dom.parentNode.removeChild
窗户。URL.revokeObjectURL(url)
}).catch((err)={})
如果后台返回的流文件是图片，前端需要直接显示这个图片，比如登录时的图片验证码。示例代码如下：
axios.post(url，{.someData}，{responseType: 'blob'})。然后((res)={
const { data }=res
const reader=new FileReader()
reader.readAsDataURL(数据)
reader.onload=(ev)={
const img=新图像()
img.src=ev.target.result
document.body.appendChild(img)
}
}).catch((err)={})
总结
关于前端使用axios下载文件的这篇文章到此为止。有关axios下载文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。