1.开发环境 react
2.电脑系统 windows11专业版
3.在开发的过程中,可能会须要导出excel文件,上面我来分享一下办法,心愿对你有所帮忙,让咱们一起致力走向巅峰。
4.xlsx:

援用呼声最高的是 xlsx,又叫 SheetJS,也是下载量最高和 star最多的库。试用了一下很弱小,然而！默认不反对扭转款式,想要反对扭转款式,须要应用它的免费版本。

ExcelJS:

ExcelJS 周下载量 450k，github star 9k，并且领有中文文档，对国内开发者很敌对。尽管文档是以README 的模式，可读性不太好，但重在内容，罕用的性能根本都有笼罩

5.装置:

npm install exceljsnpm install file-saver

6.外围代码:

// 导入import * as ExcelJs from 'exceljs';import {saveAs} from "file-saver";import {Workbook} from "exceljs";import {ColumnsType} from "antd/lib/table/interface";
//办法const generateHeaders = (columns) => {        return columns?.map(col => {            const obj = {                // 显示的 name                header: col.title,                // 用于数据匹配的 key                key: col.dataIndex,                // 列宽                width: col.width / 5 || 20            };            return obj;        })    }    const saveWorkbook = (workbook, fileName) => {        // 导出文件        workbook.xlsx.writeBuffer().then((data => {            const blob = new Blob([data], {type: ''});            saveAs(blob, fileName);        }))    }    const tableExport = (TableData,ColumnsData) => {        // 创立工作簿        const workbook = new ExcelJs.Workbook();        // 增加sheet        const worksheet = workbook.addWorksheet('demo sheet');        // 设置 sheet 的默认行高        worksheet.properties.defaultRowHeight = 20;        // 设置列        worksheet.columns = generateHeaders(ColumnsData);        // 增加行        worksheet.addRows(TableData);        // 导出excel        saveWorkbook(workbook, 'simple-demo.xlsx');    }
// div 代码:<Row gutter={24} justify={"end"}>  <Button type="primary" onClick={()=>{      tableExport(api_tableData,api_columns)  }}>导出</Button></Row><Row gutter={24} style={{marginTop:10}}>  <Table columns={api_columns}          dataSource={api_tableData}          style={{width: "100%"}}          pagination={false}         scroll={{x: 'max-content'}}/></Row>
// 留神:tableExport 办法第一个参数是:table;第二个参数是:columns

6-1效果图如下:

7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。