前端标准的表格下载成xls文件

这篇博客介绍了如何在前端应用中利用FileSaver.js和XLSX库将表格数据转换并下载为XLSX格式的Excel文档。通过导入这两个库,可以方便地将包含标题、表头和数据行的表格信息封装到工作簿中,并使用FileSaver保存为.xlsx文件供用户下载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端经常需要吧表格的信息下载成xls文档,下载方法的封装直接看code

file-saver的git仓库:GitHub - eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementationAn HTML5 saveAs() FileSaver implementation. Contribute to eligrey/FileSaver.js development by creating an account on GitHub.https://github.com/eligrey/FileSaver.js

XLSX的仓库:GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit:green_book: SheetJS Community Edition -- Spreadsheet Data Toolkit - GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkithttps://github.com/SheetJS/sheetjs

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

interface downLoadType {
    title: string //表头
    headerRow: string[], //table的表头
    bodyRows: [string[]] //对应的每一行
}
export const onDownloadXlsx = (data: downLoadType) => {
    const { title = '', headerRow = [], bodyRows = [] } = data;

    const table = [
        [title],
        [], // 空行
        headerRow,
        ...bodyRows
    ];

    const workbook = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet(table);
    XLSX.utils.book_append_sheet(workbook, ws, 'Sheet_1');

    const opts = { bookType: 'xlsx', bookSST: false, type: 'array' };
    const wbout = XLSX.write(workbook, opts as any);
    FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), `${title}.xlsx`);

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值