前端自主导出excel、通过js调用后端接口下载表格文件（GET和POST方法）

一. 如果后端不做或不支持导出报表

（1）基于better-xlsx和file-saver插件的再一次封装

1. 引入插件：npm install sw_react_plug --save-dev; npm install;（如果已经引入了better-xlsx和file-saver包，如果没有，就需要再执行npm install --save-dev better-xlsx file-saver安装better-xlsx和file-saver）。
2. 页面引入插件： import { ExportExcel } from 'sw_react_plug。
3. 引用：<ExportExcel fileName=xxx数据报表 column={columns} dataSource={data} />；其中column是表格列的配置描述，dataSource是数据数组，（对应ant design里table的columns和dataSource）。

特别提醒:
    这样直接引用会render一次就会加载从而下载，所以需要我们通过条件判断进而加载。eg：
1. 初始化int：status为0；
2. 点击事件：status++;
3. 使用： {status!== 0 && <ExportExcel {...rxportExcelProps} />}；(可直接status && xxx，使用的是隐式转换。)

（2）ReactHTMLTableToExcel插件

1. 引入插件：npm install react-html-table-to-excel --save-dev; npm install;。
2. 页面引入插件：import ReactHTMLTableToExcel from 'react-html-table-to-excel。
3. 引用：<ReactHTMLTableToExcel className="download-table-xls-button" table="table-to-xls" filename="file_name" sheet="sheet_name" buttonText="导出报表"/>；<table ... id="table-to-xls">xxx</table>;；

特别提醒：
    在使用ui库之后，可能会有一些变化，比如antd里面以hooks为例需要这样做：
        import ReactDOM from 'react-dom';
        const tableEl = useRef(null);
        useEffect(() => {
        const tableCon = ReactDOM.findDOMNode(tableEl.current);
        const table = tableCon.querySelector('table');  //获取table
        table.setAttribute('id',`table-to-xls`);     //给该table设置属性
    },[]);
    
    <Table ref='table_El'  />;
    注： 如果还是赋值不上，在Table外层包裹一层div，给div赋值ref。

二. 调用后端接口

（1）GET请求

1. window.location.href = '/api/xxx/xxx'。
2. window.open('/api/xxx/xxx?params')。
3. <a href={`/api/xxx/xxx?params`} download="报表.xlsx">导 出</a>

（2）POST请求

直接调用接口是返回这样的表格流文件格式：

打印返回是这样的：

我们需要这样操作：使用Blob 对象指定要读取的文件或数据，
下面以axios请求为例

axios.post('/apis/api/refund/getRefundFile', {...payload}, {
      responseType: 'blob'
    }).then(res => {
      const BLOB = res.data; // Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
      const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
      fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
      fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
        // 新建个下载的a标签，完成后移除。
        let a = document.createElement('a');
        a.download = `数据报表.xlsx`;
        a.href = event.target.result; 
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    }).catch(err => {
      console.log(err.message)
    });

（3）还可以这样操作：

const clickHandle = src => {
    var iframe = document.createElement('iframe');
    iframe.src = src ;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}