快捷導(dǎo)航

前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過(guò)程

更新時(shí)間：2022年08月01日 13:16:40 作者：柯曉楠

項(xiàng)目中經(jīng)常會(huì)遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、需求描述

在前后端分離開(kāi)發(fā)的項(xiàng)目中，前端無(wú)論使用Vue或React哪種框架，發(fā)送HTTP請(qǐng)求都會(huì)使用Ajax異步請(qǐng)求的方式。在很多項(xiàng)目中都會(huì)選擇使用 axios 發(fā)送請(qǐng)求。但是在使用 axios 實(shí)現(xiàn)下載功能時(shí)，往往會(huì)出現(xiàn)以下問(wèn)題。

當(dāng)前端直接使用 axios 去請(qǐng)求下載文件的 api 接口時(shí)，狀態(tài)碼返回200，但是獲取的數(shù)據(jù)卻是一堆亂碼，效果如下：

2、問(wèn)題分析

下載其實(shí)是瀏覽器的內(nèi)置事件，瀏覽器的 GET請(qǐng)求（frame、a）、 POST請(qǐng)求（form）具有如下特點(diǎn)：

response 會(huì)交由瀏覽器處理；
response 內(nèi)容可以為二進(jìn)制文件、字符串等。

但是AJAX請(qǐng)求不一樣：

response 會(huì)交由 Javascript 處理；
response 內(nèi)容只能接收字符串才能繼續(xù)處理。

因此，AJAX本身無(wú)法觸發(fā)瀏覽器的下載功能。

3、解決方案

要在 axios 的 config 配置 responseType: ‘blob’ （非常關(guān)鍵），服務(wù)端讀取文件，以 content-type: ‘application/octet-stream’ 的格式返回前端，前端接收到數(shù)據(jù)后使用 Blob 來(lái)接收數(shù)據(jù)，并且創(chuàng)建a標(biāo)簽進(jìn)行下載。

一個(gè)對(duì)象的類型取決于 responseType 的值，當(dāng)值為 “blob”時(shí)表示 response 是一個(gè)包含二進(jìn)制數(shù)據(jù)的 Blob 對(duì)象。
在使用 axios 發(fā)起請(qǐng)求前，首先了解一下 responseType 這個(gè)屬性是如何在 axios 中使用的。以 axios 最常用的 get 和 post 請(qǐng)求為例，這兩種請(qǐng)求方式在傳遞參數(shù)的時(shí)候也是不同的：
在get請(qǐng)求當(dāng)中，config 是第二個(gè)參數(shù)，而到了 post 里 config 變成了第三個(gè)參數(shù)，這是傳遞 responseType 第一個(gè)需要注意的地方。

4、代碼實(shí)現(xiàn)

后端實(shí)現(xiàn)以 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 請(qǐng)求下載文件 api 接口時(shí)，一定要區(qū)分不同請(qǐng)求方法的使用，語(yǔ)法如下：

// axios設(shè)置reponseType的方式應(yīng)該類似下面
const url = '/info/download'

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

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

前端解析數(shù)據(jù)流，主要使用 Blob 對(duì)象來(lái)進(jìn)行接收，示例代碼如下：

// 以之前的post請(qǐng)求舉例
axios.post(url, {...someData}, {responseType: 'blob'})
    .then((res) => {
        const { data, headers } = res
        const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
        // 此處當(dāng)返回json文件時(shí)需要先對(duì)data進(jìn)行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) => {})

如果后臺(tái)返回的流文件是一張圖片的話，前端需要將這張圖片直接展示出來(lái)，例如登錄時(shí)的圖片驗(yàn)證碼，示例代碼如下：

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) => {})