在很多时候我们需要将 Table 的数据导出成对应的Excel，将数据提出出来

    在这里要说明几点：

    • 如果导出的Table表的数据时，表格的数据量不建议过大
    • 可以导出多个Excel表的形式
    • 同时支持链接下载的形式

    这里就不过多的介绍了，我们来看看 导出的数据是怎么样的~
    image.png

    在这里数据共有100条，我将前10和后90的数据分离出来，方便演示~
    image.png
    image.png

    位置：src/utils/Method/tools/ExportExcel.ts

    1. import XLSX from 'xlsx';
    2. import { message } from 'antd';
    4. interface exportProps {
    5.   headers: Array<any>,
    6.   data: Array<any>,
    7.   sheetName: string
    8. }
    10. /**
    11.  * @module ExportExcel 导出组件（配合Ant design pro 中的Table做导出）
    12.  *
    13.  * @param sheets 可数组 可字符串（为字符串时，将文档的地址传传入）为数组时有以下参数
    14.  * @param fileName 导出的文件名
    15.  *
    16.  * @sheets
    17.  * @param headers 表头，对应 tableList， data 数据源，
    18.  * @param data 数据源，列表返回的数据源
    19.  * @param sheetName 导出表对应的名字
    20.  * 格式：[{ headers: columns, data: dataSource, sheetName: "导出文件" }]
    21.  */
    22. const ExportExcel = (sheets: exportProps[] | string, fileName:string= 'Excel文件') => {
    24.   if(typeof sheets === 'string'){
    25.     window.location.href = sheets
    26.     return
    27.   }
    29.   if(!Array.isArray(sheets)) return message.error('请返回对应的数组或者下载地址！')
    30.   const getPostition = (index:number) => {
    31.     let result = String.fromCharCode(65 + parseInt(String(index % 26)));
    32.     let value = index / 26;
    33.     while (value >= 1) {
    34.         result = String.fromCharCode(65 + parseInt(String(value % 26 - 1))) + result;
    35.         value = parseInt(String(value / 26));
    36.     }
    37.     return result;
    38.   }
    40.   const getColWidth = (headers: Array<any>, dataArr:Array<any>) => {
    41.     const allWch = [headers,].concat(dataArr).map(item => item.map(val => {
    42.         let value = val.title || val.content || "";
    43.         let length = 10;
    44.         if (value) {
    45.             if (value.toString().charCodeAt(0) > 255) {
    46.                 length = value.toString().length * 2;
    47.             } else {
    48.                 length = value.toString().length;
    49.             }
    50.         }
    51.         return {
    52.           'wpx': length < 40 ? length * 10 : 40 * 10,
    53.         };
    54.     }))
    55.     let colWidth = allWch[0];
    56.     for (let i = 1; i < allWch.length; i++) {
    57.         for (let j = 0; j < allWch[i].length; j++) {
    58.             if (colWidth[j]['wpx'] < allWch[i][j]['wpx']) {
    59.                 colWidth[j]['wpx'] = allWch[i][j]['wpx'];
    60.             }
    61.         }
    62.     }
    63.     return colWidth;
    64.   }
    66.   const sheetsArr = sheets.map(sheet => {
    67.     const _headers = sheet.headers
    68.         .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: getPostition(i) + 1 }))
    69.         .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});
    70.     const dataArr = sheet.data
    71.         .map((item, i) => sheet.headers.map((head, j) => {
    72.             let content = ""
    73.             if (head.render) {
    74.                 content = head.render(item[head.dataIndex], item)
    75.             } else {
    76.                 content = item[head.dataIndex]
    77.             }
    78.             return { content, position: getPostition(j) + (i + 2) }
    79.         }
    80.         ));
    81.     // 对刚才的结果进行降维处理（二维数组变成一维数组）
    82.     const _data = dataArr.reduce((prev, next) => prev.concat(next))
    83.         // 转换成 worksheet 需要的结构
    84.         .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});
    85.     // 合并 headers 和 data
    86.     const output = Object.assign({}, _headers, _data);
    87.     // 获取所有单元格的位置
    88.     const outputPos = Object.keys(output);
    89.     // 计算出范围 ,["A1",..., "H2"]
    90.     const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;
    91.     return Object.assign(
    92.       { sheetName: sheet.sheetName },
    93.       output,
    94.       {
    95.           '!ref': ref,
    96.           '!cols': getColWidth(sheet.headers, dataArr),
    97.       },
    98.     )
    99.   })
    101.   const sheetNames = sheetsArr.map(sheet => sheet.sheetName);
    102.   const wbSheets = sheetsArr.reduce((prev, next) => Object.assign({}, prev, { [next.sheetName]: next }), {});
    104.   const wb = {
    105.       SheetNames: sheetNames,
    106.       Sheets: wbSheets,
    107.   };
    108.   XLSX.writeFile(wb, fileName + ".xlsx");
    109. }
    111. export default ExportExcel;

    调用

    1. import { Method } from '@/utils';
    3. Method.ExportExcel([
    4.   {headers: columns, data: Top10File, sheetName: "前10数据"},
    5.   {headers: columns, data: File, sheetName: "后90条数据" },
    6. ],'自定义导出组件')

    具体代码请看：Excel导出