前端下载文件的几种方式 使用Blob下载文件
在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：
1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）
2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）
第一种方式比较简单，但是使用场景有限。
第二种方式通用性更好
我们先一下第一种的使用场景：
- a链接
下载文件
我们可以通过download属性，可以实现对下载的文件进行重命名。
下载文件
- 还可以使用编程式的写法：
1.location的href
2.window.open
亿点小知识：在使用window.open的时候在除Google Chrome 浏览器会拦截内容但在其他浏览器是可以直接下载的
如果要想Google Chrome 设置里面更改
第二种 使用blob文件流下载
{
const href = URL.createObjectURL(res.data)
const link = document.createElement('a')
link.download = '附件.pdf'
link.href = href
link.click()
document.body.removeChild(link);
URL.revokeObjectURL(href); // 释放内存
})
}" _ue_custom_node_="true">下面封装了一个 blob的方法逻辑 感兴趣的可以参考一下
// 下载
const DownloadFile = (row: any) => {
contractApi
.xxxApi({ fullFileName: row.filePath })
.then((blob: any) => {
row.fileFormat = row.filePath.split('.')[row.filePath.split('.').length - 1]
download(blob, row.fileFormat, row.fileName)
})
}
// file:文件流(一般指后端返回的流)； fileType:文件类型/MIME类型；fileName:文件名称
export function download(file: any, fileType: string, fileName?: string) {
const blob = new Blob([file], { fileType})
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = fileName // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
}
// download(blobStream,{ 'Content-Type': 'application/vnd.ms-excel;charset=utf-8' })三、Blob
1、Blob 是什么
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。**在JavaScript中 Blob 类型的对象表示不可变的类似文件对象的原始数据。**为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，
