前端下载通常分为两种情形：
1、后端直接给一个文件地址，通过浏览器打开就可以下载；
2、另外一种则需要发送请求，后端返回二进制流数据，前端解析流数据，生成URL，实现下载。
一、原生写法（最简单的办法）
原理：通过a标签的download形式去下载
举栗
const exportExcel = (id: string, name: string) => {
const exportFileContent = document.getElementById(id).outerHTML;
let blob = new Blob([exportFileContent], { type: 'text/plain;charset=utf-8' }); //使用Blob
blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type }); //解决中文乱码问题
const link = window.URL.createObjectURL(blob); //设置链接
const a = document.createElement('a'); //创建a标签
a.download = name; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a);
};
// jsx
<Button
type="link"
onClick={() => exportExcel('download_table', '分布分析详细数据报表.xlsx')}>
</Button>
补充说明
- Blob 对象表示一个不可变、原始数据的类文件对象。
-
URL.createObjectURL(object) 静态方法会创建一个 DOMString，返回格式类似'blob:http://localhost:4200/0e40281d-92e9-40cf-af54-6193fb3a3f8c'。
-
关于outerHTML与innerHTML
（1）区别
innerHTML: 从对象的起始位置到终止位置的全部内容, 不包括HTML标签。
outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
（2）例子
<div id="test">
<span style="color:red">test1</span> test2
</div>
innerHTML的值：<span style="color:red">test1</span> test2
outerHTML的值：<div id="test"><span style="color:red">test1</span> test2</div>
二、xlsx下载
xlsx：引用方式的坑
tsx文件的引入方式踩坑(原因可能是解析tsx解析出来的暴露方式有点问题，所以调用不到XLSX下面的方法)
import XLSX from 'xlsx';
XLSX.utils // 报错undefined
// 正确的方式
import * as XLSX from 'xlsx';
// 或者
const XLSX = require('xlsx');
缺点：不太适用于复杂的表格数据，比如合并单元格之类的表格
Last but not least，推荐阅读：
