需求源源不断，代码越写越乱 小菜鸡成长日记
工作中遇到一个导出Excel表格的需求。
导出Excel
让我们来理一理这个思路哈
首先来说说导出Excel的原理，大部分情况下，导出功能的实现都是后端通过接口把blob文件返回给前端，然后前端再模拟一个下载的动作，将blob数据转换并下载到本地。
什么是blob？
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。Stream API 中的 ReadableStream 接口表示可读的字节数据流。Fetch API通过 Response 的属性 body 提供了一个具体的ReadableStream对象。
a标签：
// 封装导出文件的方法
//它接收一个 AxiosResponse 对象作为参数，该对象包含从服务器返回的Excel文件的响应数据和元数据。
export function downLoadExcel(res: AxiosResponse) {
//content-disposition属性是一个HTTP头部字段，其中包含描述服务器如何处理响应数据的指示，例如文件名和文件类型。
const disposition = res.headers['content-disposition'] as string
//将后端返回的数据转化为blob对象
const data = new Blob([res.data], {
type: (res.headers['content-type'] as string) || 'application/octet-stream'
})
//在这里，我们使用 window.URL对象的createObjectURL方法创建 URL 对象，该方法返回一个 URL 字符串，该字符串可以用于下载 Excel 文件。
const downloadUrl = window.URL.createObjectURL(data)
//创建链接
const link = document.createElement('a')
//这一行代码将 link 元素的 href 属性设置为之前创建的 URL 对象，以便将其链接到 Excel 文件。
link.href = downloadUrl
//设置 link元素的 download 属性，该属性指定了将要下载的文件的名称。在这里，我们从 content-disposition 属性中提取文件名，然后使用decodeURI方法将其解码。
link.download = decodeURI(disposition.slice(disposition.indexOf('filename=') + 9))
//触发<a>元素的 click事件，该事件将自动下载 Excel 文件。
link.click()
//使用 `revokeObjectURL` 方法释放之前创建的 URL 对象，以便释放内存。
window.URL.revokeObjectURL(downloadUrl)
//从 DOM 中删除 `<a>` 元素，以便在下载完成后释放内存。
link.remove()
}
然后页面直接调用就好了
// 导出
const handleExport = async () => {
//exprotExcel是封装的导出接口，searchForm是查询条件，有时候需要根据查询条件来导出数据，所以参数直接传查询条件就好了
//查询条件默认是空的，这种情况下就是导出整张表
const res = await exprotExcel(searchForm)
downLoadExcel(res)
}
