前端如何实现文件下载

前端下载文件的方法有两种， 一种是后端返回下载的URL， 使用 Window.open(URL) 下载， 另一种就是后端直接返回文件的二进制内容，前端做转换再下载。

使用场景

如果后台返回的是 get 请求的下载可以直接使用 a 标签下载

<a href='http://下载地址' target="_blank" rel="noopener noreferrer nofollow">下载</a>

如果后台返回的是 URL 地址

window.open(URL, '_blank')

如果后台的的下载接口是 post 请求时，需要使用 blob 转换，

前端如何将二进制文件做转换实现下载呢？

只要思想就是把后端返回的二进制文件放在 Blob 里面，并且把使用Blob 创建一个URL ，再通过JavaScript动态创建一个a标签，使用a标签打开这个 URL 。

获取后台返回的值要用 Blob 类型来接收， 把 axios 的 responseType 改成 blob， 并且在接口调用成功后进行上面的步骤。

具体实现

axios.post({
method: 'post',
url: '/export',
responseType: 'blob'
}).then((res) => {
const data = res.data
const url = window.URL.createObjectURL(new Blob([data]))
const link = document.createElement('a')

link.style.display = 'none'
link.href = url
link.setAttribute('download', 'my.text')
document.body.appendChild('link')
link.click()
document.body.removeChild(link)
})

项目中实际使用

1. 把定义 Blob 和动态创建 a 标签的步骤封装在函数里面

export const downloadFile = (data: Blob, filename: string, type?: {type: string}): void => {
  const url = window.URL.createObjectURL(new Blob([data], type))
  const link = document.createElement('a')

  link.href = url
  link.setAttribute('download', filename)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

2. 在 axios 函数里修改返回类型和调用下载函数

export const configExport = async (uniqueId, params): Promise<ApiResponse<Blob>> => {
  const { data, headers } = await $http.post<ApiResponse<Blob>>(
    `/v1/virtual_machines/exportConfig/${uniqueId}`,
    params,
    {
      responseType: 'blob',
    }
  )

  if (data.message) {
    $notification.error('操作失败，请稍后重试！')
  } else {
    // @ts-expect-error
    downloadFile(data, qs.parse(headers['content-disposition'])['attachment; filename'])
   //downloadFile(data, `squids-${uniqueId}`, { type: 'application/zip' })
  }

  return data
}

相关技术

Blob

概念： Blob 对象表示一个不可变的， 原始数据的类文件对象，它的数据可以按文本或二进制格式进行读取。

Blob 构造函数

const aBlob = new Blob(array, option)

第一个参数是一个类数组， 必填

第二个参数非必填有两个属性： type, 表示MIME类型， 默认值是’'。还有一个是endings 表示 /n 换行符如何被写入，默认值是’transparent’保持不变， 还有’native’按照宿主机的换行符

总结

• 前端实现文件的下载主要有两种方式，直接打开下载链接和通过 Blob 对二进制流文件下载，实际用那种方法可以看后端的返回值和请求方式
• 使用 Blob 下载主要步骤有三步，更改 axios 的 responseType ，根据返回值构造 Blob 函数并转换成 URL ，动态创建 a 标签打开 URL
• 封装项目中通用的二进制流文件下载函数及使用
• Blob 构造函数的相关参数了解

如果这篇文章有帮助到你欢迎点赞👍🏻+收藏⭐️，也欢迎评论留言~

参考

前端下载二进制流文件

前端接受后端文件流并下载的几种方法

mdn-Web API 接口参考-Blob