前端实现下载文件（处理后端返回的二进制流）

参考连接：https://blog.csdn.net/qq_45494634/article/details/119108908

需求描述

点击按钮向后端请求数据，实现文件下载。

请求结果

处理

1 接收二进制流

正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理，需要在请求的时候设置 responseType: ‘blob’

Blob代表了一种不变的、原数据的类文件对象，它们可以当作text或者binary data或者转换为可读取的流(ReadableStream)。所以它的方法可以被用来处理数据。

2 下载处理

<template>
      <button @click="doDownload">button>
template>

<script setup>
import { download } from '../axios/task'

function doDownload () {
  download()
    .then((res) => {
      const blob = new Blob([res.data])
      const fileName = '报表' + '.xlsx'
      // 允许用户在客户端上保存文件
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
      } else {
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click() // 模拟在按钮上实现一次鼠标点击
        window.URL.revokeObjectURL(link.href) // 释放 URL 对象
      }
	     console.log(res)
    })
    .catch((error) => {
    	console.log(error)
    })
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29