纯前端下载table为excel至本地_tab resize下载csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_40830369/article/details/122238993

本文详细介绍了如何使用前端技术，如xlsx库，将数组转换为Excel表格并下载到本地。通过实例展示了从数据源获取、工作簿创建、sheet添加到最后文件下载的完整流程。适合快速上手纯前端Excel导出需求。

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

纯前端下载table为excel至本地

需求描述：

其实需求很简单，因为页面已经有数据，所以可以直接拿到数据然后下载至本地。所以这个过程不需要后端了。

需要的依赖包：xlsx

直接在项目终端下载该包 yarn add xlsx，或者用npm下载都行，看你项目怎么启动的。

导出excel的逻辑：

excel整个表格专业名词是workbook，里面每张表格是sheet
把数据生成sheet，const sheet = xlsx.utils.json_to_sheet(array)，json_to_sheet是将由对象组成的数组转化成sheet
创建虚拟的workBook,把sheet添加到workbook中
xlsx 的 xlsx.writeFile帮我们把写好的excel直接下载

实现代码：

导出数据为excel的功能的函数：

import xlsx from 'xlsx';

/* 
    * 导出 excel 文件
    * @param array JSON 数组
    * @param sheetName 第一张表名
    * @param fileName 文件名
*/
export function exportExcelFile(array, sheetName, fileName ) {
    console.log(array);
    const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
    console.log('jsonWorkSheet', jsonWorkSheet);
    const workBook = {
        SheetNames: [sheetName],
        Sheets: {
            [sheetName]: jsonWorkSheet,
        }
    };
    console.log('workBook', workBook);
    return xlsx.writeFile(workBook, fileName);
}

引用该功能：

            <Button
                style={{ marginLeft: '20px' }}
                disabled={dataSource.length === 0}
                type="primary"
                onClick={ () => {
                    let sheetName = '表1';
                    let fileName = 'example.xlsx';
                    exportExcelFile(dataSource, sheetName, fileName);
                }}
            >
                下载数据
            </Button>