网页中将表格保存到本地的实现

最近在项目中对于后台的表格都要提供下载功能，这里基于 XLSX 和 file-saver 库实现一个表格保存为 Excel 文件的方法。

定义数据类型

列数据

interface Col {
    name: string; // 列名（表格的第一行）key: string; // 关键字
}

// 例如 {name: '姓名', key: 'name'}

表格数据

表格数据应该是根据列数据 key 值的一个数组，如果列数据为：

[{ name: '姓名', key: 'name'},
    {name: '年龄', key: 'age'},
    {name: '性别', key: 'sex'},
]

则对应的表格数据应该为：

[{ name: '张三', age: 24, sex: '男'},
    {name: '李四', age: 25, sex: '女'},
    {name: '王五', age: 26, sex: '男'},
]

import XLSX from 'xlsx';
import {saveAs} from 'file-saver';

interface Col {
    name: string; // 列名
    key: string; // 关键字
}

/**
 * 格式化处理数据
 *
 * @param {Col[]} cols 列数据
 * @param {*[]} templateData 表格数据
 * @returns {[string[], ...*[]]} 格式化处理后的数据
 */
function getTemplateData(cols: Col[], templateData: any[]): [string[], ...any[]] {const data: any[] = [];
    const names: string[] = [];
    cols.forEach((item) => {names.push(item.name);
        },
    );
    templateData.forEach((row) => {const newRow: any[] = [];
        cols.forEach((item) => {newRow.push(row[item.key]);
        });
        data.push(newRow);
    });
    return [names, ...data];
}

/**
 * 下载表格
 *
 * @param {Col[]} cols 列数据
 * @param {*[]} templateData 表格数据
 * @param {String} fileName 保存的文件名
 */
function downloadExcel(cols: any[], templateData: any[], fileName = '示例.xlsx'): void {const workbook = XLSX.utils.book_new();
    const workbookOptions: any = {bookType: 'xlsx', bookSST: false, type: 'array'};
    const ws = XLSX.utils.aoa_to_sheet(getTemplateData(cols, templateData));
    XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
    const workbookOut = XLSX.write(workbook, workbookOptions);

    saveAs(new Blob([workbookOut], {type: 'application/octet-stream'}), fileName);
}

export {downloadExcel, Col};