当前位置：首页 > article >正文

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

article 2025/8/7 19:27:59

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 = objectUrla.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 = endUrldocument.body.appendChild(a)a.click()a.remove()
}

适用场景：