前端自主導出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);
}
複製代碼