快捷導(dǎo)航

前端實(shí)現(xiàn)獲取后端返回的文件流并下載三種方法

更新時(shí)間：2025年04月09日 09:27:36 作者：m0_74823524

文件下載是最常見(jiàn)的流形式返回?cái)?shù)據(jù)的應(yīng)用場(chǎng)景之一,通過(guò)流形式返回文件內(nèi)容,可以避免將整個(gè)文件加載到內(nèi)存中,從而減少內(nèi)存消耗,這篇文章主要介紹了前端實(shí)現(xiàn)獲取后端返回的文件流并下載的三種方法,需要的朋友可以參考下

方法一：使用Axios實(shí)現(xiàn)文件流下載

使用Axios實(shí)現(xiàn)文件流下載的方法，本人親測(cè)可以實(shí)現(xiàn)

import axios from 'axios';
import { getToken } from '@/utils/auth'

handleExport() {
  // 接口調(diào)用獲取文件
  axios({
    method: 'get',
    responseType: 'blob', // 指定響應(yīng)類型為blob
    url: this.GLOBAL.baseURL + '/api/v1/business/user/export',
    data: this.queryParams, // 導(dǎo)入文件一般都用FormData格式數(shù)據(jù)
    headers: { 'Authorization': 'Bearer ' + getToken() } // 傳遞token進(jìn)行身份驗(yàn)證
  }).then(res => {
    if (res.code === 200) {
      // 導(dǎo)入成功
      this.downloadBinaryFile(res.data, '導(dǎo)入失敗后下載的報(bào)錯(cuò)文件')
    } else {
      // 輸出失敗信息
    }
  }).catch(error => {
    console.error('下載失敗', error);
  });
},
    
/**
 * 將二進(jìn)制文件下載到本地，保存為excel文件
 * @param {*} binFile 二進(jìn)制文件流
 * @param {*} fileName 下載后的文件名
 * @param {*} blobType 文件格式，默認(rèn)為 "application/vnd.ms-excel"
 */
downloadBinaryFile(binFile, fileName, blobType = "application/vnd.ms-excel") {
  // 創(chuàng)建 Blob 對(duì)象，包含二進(jìn)制文件流和文件類型
  const blobObj = new Blob([binFile], { type: blobType });
  
  // 創(chuàng)建下載鏈接元素
  const downloadLink = document.createElement('a');
  
  // 處理不同瀏覽器的 URL 兼容性
  let url = window.URL || window.webkitURL; 
  url = url.createObjectURL(blobObj); // 創(chuàng)建文件 URL
  
  // 設(shè)置下載鏈接屬性
  downloadLink.href = url;
  downloadLink.download = fileName;
  
  // 將下載鏈接添加到文檔中并觸發(fā)點(diǎn)擊事件
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 移除下載鏈接并釋放 URL 對(duì)象
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(url);
}

實(shí)現(xiàn)的效果

優(yōu)點(diǎn)

支持傳遞Token進(jìn)行身份驗(yàn)證，安全性較高
支持POST請(qǐng)求，可以將參數(shù)放在請(qǐng)求體中，避免URL長(zhǎng)度限制及參數(shù)暴露

缺點(diǎn)

實(shí)現(xiàn)相對(duì)復(fù)雜，需要手動(dòng)創(chuàng)建和管理Blob對(duì)象及下載鏈接

方法二：使用封裝的Request工具實(shí)現(xiàn)文件流下載

接下來(lái)介紹使用封裝的Request工具實(shí)現(xiàn)文件流下載的方法

import request from '@/utils/request'

// 日志管理收藏、瀏覽、下載導(dǎo)出接口
export function exportUserOperateAdmin(data, headers) {
  return request({
    url: '/business/user/export',
    method: 'get',
    data: data,
    headers: headers
  })
}

// 調(diào)用導(dǎo)出接口
exportUserOperateAdmin(this.queryParams, { responseType: 'blob' }).then(
  response => {
    console.log(response)
    const url = window.URL.createObjectURL(new Blob([response.data])) // 創(chuàng)建下載鏈接
    const link = document.createElement('a')
    link.href = url
    link.download = '全文導(dǎo)入模板.xlsx' // 設(shè)置文件名
    document.body.appendChild(link)
    link.click() // 觸發(fā)下載
    document.body.removeChild(link) // 下載后移除元素
  }
).catch(error => {
  console.error('下載失敗', error)
  this.loading = false // 停止加載，隱藏加載狀態(tài)
})

優(yōu)點(diǎn)

封裝后的Request工具調(diào)用簡(jiǎn)單，代碼更簡(jiǎn)潔
支持傳遞Token進(jìn)行身份驗(yàn)證，安全性較高

缺點(diǎn)

實(shí)現(xiàn)相對(duì)簡(jiǎn)單，但仍需手動(dòng)處理Blob對(duì)象及下載鏈接

方法三：直接通過(guò)URL跳轉(zhuǎn)下載

最后介紹直接通過(guò)URL跳轉(zhuǎn)實(shí)現(xiàn)文件下載的方法

const baseurl = this.GLOBAL.baseURL
// 拼接上導(dǎo)出的地址，如果接口還需要其他參數(shù)，都可以直接拼接上
let url = baseurl + '/api/v1/business/user/export';
console.log(url)
alert(url)
// 第二個(gè)參數(shù)'_self'表示在當(dāng)前頁(yè)下載，不打開(kāi)新的頁(yè)面
window.open(url, '_self')