vue3项目 前端文件下载的两种工具函数

发布于:2025-05-30 ⋅ 阅读:(16) ⋅ 点赞:(0)

1、Blob 流下载

Blob 表示不可变的原始数据的类文件对象,通常用于处理文件或大块二进制数据。

注意:js中还有一个二进制数据类型ArrayBuffer,它们的区别如下

  • Blob 可以位于磁盘、高速缓存内存和其他不可用的位置;ArrayBuffer 是存在内存中的,可以直接操作

  • Blob 对象是不可变的;而 ArrayBuffer 是可以通过 TypedArrays 或 DataView 来操作

  • 二者可以通过方法互相转换

  • Blob包含数据和 MIME 类型(标准化文件类型标识系统,用于描述文档、文件或字节流的性质和格式)信息;ArrayBuffer 不包含任何元数据(如文件类型),更接近计算机底层的二进制表示

具体见博文:Js:Blob、ArrayBuffer、FileReader、URL、Image、关于文件下载的方法案例-CSDN博客

/**
 * 下载Blob流文件方法
 * @param data
 * @param filename
 */
export function downloadBlobFile(data, filename) {
  const fileName = filename + moment(new Date()).format('YYYYMMDD')
  const blob = new Blob([data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
  })
  const objectUrl = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = objectUrl
  a.setAttribute('download', fileName)
  document.body.appendChild(a)
  a.click()
  a.remove()
  URL.revokeObjectURL(objectUrl) // 释放内存
}

适用场景:

  • 后端返回二进制流(如 axios 请求设置 responseType: 'blob'

  • 需要前端生成文件并下载

  • 需要自定义文件名和文件类型

  • 处理动态生成的内容(如导出的Excel

使用示例:

 2、根据url下载文件

/**
 *根据url下载文件
 */
export function downloadFileByURL(url: string) {
  let endUrl = url
  // 不同模块不同路径
  if (url.includes('/api/web/csp')) {
    endUrl = import.meta.env.VITE_APP_API_PATH_RESOURCE + url
  } else {
    endUrl = import.meta.env.VITE_APP_API_PATH_USER + url
  }
  const a = document.createElement('a')
  a.setAttribute('target', '_self')
  a.style.display = 'none'
  a.href = endUrl
  document.body.appendChild(a)
  a.click()
  a.remove()
}

 适用场景:

  • 下载服务器静态文件(如图片、PDF)

  • 文件已存在于服务器指定路径

  • 不需要前端处理文件内容

使用示例: