2021 js-xlsx (ant design/js) 导出table数据到Excel

js-xlsx (ant design/js) 导出table数据到Excel

首先要先下载xlsx

 npm install xlsx
 或
 yarn add  xlsx

我这里是用的ant design pro，其他用法是一样样的

  <Button type="primary" onClick={downloadData}>
     下载
 </Button>

这里是函数时组件的写法，当用的js是直接写未function即可

//下载表格数据
    const downloadData = () => {
    	//表头
        const aoa = [
            ['序号','部门代码', '区域', '员工类型',
            '績效調整掛帳部門','BU代碼','金额','备注说明']
        ]
        shareSource.forEach((item: any, index: number) => {
            console.log(item);
            aoa[Number(index + 1)] = [
                `${index+1}`,
                `${item.departmentId?item.departmentId:''}`,
                `${item.areaName?item.areaName:''}`,
                `${item.employeeType?item.employeeType:''}`,
                `${item.buyerDepartment?item.buyerDepartment:''}`,
                `${item.buId?item.buId:''}`,
                `${item.money?item.money:''}`,
                `${item.remark?item.remark:''}`,
            ];
        })
        const ws = xlsx.utils.aoa_to_sheet(aoa);
        //设置列宽
        ws['!cols'] = [
            { wch: 10 },
            { wch: 15 },
            { wch: 10 },
            { wch: 30 },
            { wch: 20 },
            { wch: 20 },
            { wch: 20 },
          ]
        const wb = xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(wb, ws, "sheet");
        xlsx.writeFile(wb, '费用分摊明细.xlsx')
    }