,,前端使用axios实现下载文件功能的详细过程

,,前端使用axios实现下载文件功能的详细过程

在项目中,我们经常会遇到导出列表内容或者下载文件的需求。下面这篇文章主要介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • nagios监控使用方法,nagios下载
  • nagios监控使用方法,nagios下载,Nagios的安装与使用详细教程
  • ios长截图方法,iOS怎样长截图
  • ios长截图方法,iOS怎样长截图,iOS实现简单长截图
  • ios网络视频播放器,Ios音乐播放器
  • ios网络视频播放器,Ios音乐播放器,iOS利用AVPlayer播放网络音乐的方法教程
  • ios状态栏怎么自定义,ios状态栏图标
  • ios状态栏怎么自定义,ios状态栏图标,iOS中状态栏的基本使用方法汇总
  • ios旋转立体图形游戏,ios 旋转屏幕
  • ios旋转立体图形游戏,ios 旋转屏幕,iOS动画特效之立方体翻转
  • iOS推送延迟,ios消息延迟的解决方法
  • iOS推送延迟,ios消息延迟的解决方法,对比分析iOS延迟执行的4种方式
  • ios build版本号规范,ios version什么意思
  • ios build版本号规范,ios version什么意思,iOS 项目中的version和build 详解
  • 电脑bios没有u盘启动选项怎么办,win10u盘启动bios设置后还是无法启动
  • 留言与评论(共有 条评论)
       
    验证码: