前端下载二进制流文件

平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。

由于第一种方式比较简单，在此不做探讨。本文主要讲解一下第二种方式怎么实现。

Blob、ajax(axios)

阮一峰 JavaScript 教程介绍

Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件，它的名字是 Binary Large Object （二进制大型对象）的缩写。

具体的使用方法

axios({ 
    method: 'post',
    url: '/export',
}) .then(res => {
// 假设 data 是返回来的二进制数据 
const data = res.data 
const url = window.URL.createObjectURL(new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    })
  )
const link = document.createElement('a') 
link.style.display = 'none'
link.href = url link.setAttribute('download', '某某项目.xlsx') 
document.body.appendChild(link) 
link.click()
document.body.removeChild(link) 
})

后台返回的二进制流文件

打开下载的文件，看看结果是否正确。

发现下载的数据是乱码 在这里需要设置请求头responseType 它表示服务器响应的数据类型，由于后台返回来的是二进制数据，所以我们要把它设为 blob

axios({ 
    method: 'post',
    url: '/export',
    responseType: 'blob'
}) .then(res => {
// 假设 data 是返回来的二进制数据 
const data = res.data 
const url = window.URL.createObjectURL(new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    })
  )
const link = document.createElement('a') 
link.style.display = 'none'
link.href = url link.setAttribute('download', '某某项目.xlsx') 
document.body.appendChild(link) 
link.click()
document.body.removeChild(link) 
})

文件可以正常显示了。

转自 原文跳转