在项目中，我们经常会遇到导出列表内容或者下载文件的需求。下面这篇文章主要介绍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’

对象的类型取决于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下载文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！