QI

V1

2022/07/14阅读:43主题:凝夜紫

前端如何实现文件下载

前端下载文件的方法有两种, 一种是后端返回下载的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)
}
  1. 在 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

分类:

前端

标签:

前端

作者介绍

QI
V1