文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 13:55

关注

1、需求描述

在前后端分离开发的项目中,前端无论使用Vue或React哪种框架,发送HTTP请求都会使用Ajax异步请求的方式。在很多项目中都会选择使用 axios 发送请求。但是在使用 axios 实现下载功能时,往往会出现以下问题。

当前端直接使用 axios 去请求下载文件的 api 接口时,状态码返回200,但是获取的数据却是一堆乱码,效果如下:

2、问题分析

下载其实是浏览器的内置事件,浏览器的 GET请求(frame、a)、 POST请求(form)具有如下特点:

但是AJAX请求不一样:

因此,AJAX本身无法触发浏览器的下载功能。

3、解决方案

要在 axios 的 config 配置 responseType: ‘blob’ (非常关键),服务端读取文件,以 content-type: ‘application/octet-stream’ 的格式返回前端,前端接收到数据后使用 Blob 来接收数据,并且创建a标签进行下载。

一个对象的类型取决于 responseType 的值,当值为 “blob”时表示 response 是一个包含二进制数据的 Blob 对象。
在使用 axios 发起请求前,首先了解一下 responseType 这个属性是如何在 axios 中使用的。以 axios 最常用的 get 和 post 请求为例,这两种请求方式在传递参数的时候也是不同的:
在get请求当中,config 是第二个参数,而到了 post 里 config 变成了第三个参数,这是传递 responseType 第一个需要注意的地方。

4、代码实现

后端实现以 express 为例:

// 这里以express举例
const fs = require('fs')
const express = require('express')
const bodyParser = require('body-parser')

const app = express()
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

// 以post提交举例
app.post('/info/download', function(req, res) {
    const filePath = './myfile/test.zip'
    const fileName = 'test.zip'
    
    res.set({
        'content-type': 'application/octet-stream',
        'content-disposition': 'attachment;filename=' + encodeURI(fileName)
    })

    fs.createReadStream(filePath).pipe(res)
})

app.listen(3000)

前端在使用 axios 请求下载文件 api 接口时,一定要区分不同请求方法的使用,语法如下:

// axios设置reponseType的方式应该类似下面
const url = '/info/download'

// get、delete、head 等请求
axios.get(url, {params: {}, responseType: 'blob'})
    .then((res) => {})
    .catch((err) => {})

// post、put、patch 等请求
axios.post(url, {...params}, {responseType: 'blob'})
    .then((res) => {})
    .catch((err) => {})

前端解析数据流,主要使用 Blob 对象来进行接收,示例代码如下:

// 以之前的post请求举例
axios.post(url, {...someData}, {responseType: 'blob'})
    .then((res) => {
        const { data, headers } = res
        const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
        // 此处当返回json文件时需要先对data进行JSON.stringify处理,其他类型文件不用做处理
        //const blob = new Blob([JSON.stringify(data)], ...)
        const blob = new Blob([data], {type: headers['content-type']})
        let dom = document.createElement('a')
        let url = window.URL.createObjectURL(blob)
        dom.href = url
        dom.download = decodeURI(fileName)
        dom.style.display = 'none'
        document.body.appendChild(dom)
        dom.click()
        dom.parentNode.removeChild(dom)
        window.URL.revokeObjectURL(url)
    }).catch((err) => {})

如果后台返回的流文件是一张图片的话,前端需要将这张图片直接展示出来,例如登录时的图片验证码,示例代码如下:

axios.post(url, {...someData}, {responseType: 'blob'})
    .then((res) => {
        const { data } = res
        const reader = new FileReader()
        reader.readAsDataURL(data)
        reader.onload = (ev) => {
            const img = new Image()
            img.src = ev.target.result
            document.body.appendChild(img)
        }
    }).catch((err) => {})

总结

到此这篇关于前端使用axios实现下载文件功能的文章就介绍到这了,更多相关axios下载文件功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯