导出阵列列表到React JS中的Excel XLSX

发布于 2025-02-12 02:50:32 字数 2627 浏览 0 评论 0原文

我正在尝试将表导出到Excel文件 ,所以我在获取从数组转换为excel的数据后创建了一个函数,我工作了,但并未导出所有数据 这是一个示例 在这里 因此,如您所见,最后三列是空的,我认为问题是日期是数组数据,但我不知道 这是我的代码:

import {
    GridToolbarContainer,
    gridVisibleSortedRowIdsSelector,
    gridFilteredSortedRowIdsSelector,
    gridVisibleColumnFieldsSelector
} from "@mui/x-data-grid";


const CustomToolbar = () => {

    const apiRef = useGridApiContext();
    const getFilteredRows = ({ apiRef }) => gridVisibleSortedRowIdsSelector(apiRef);
    const handleExport = (options) => apiRef.current.exportDataAsCsv(options);
    const fileType = "application/vnd.ms-excel;charset=utf-8";
    const fileExtension = ".xlsx";
    const fileName = "myfile";
    const buttonBaseProps = {
        color: "primary",
        size: "small",
    };

    // const arrayToExcel = (a) => {}
    const Export = (a, fileName) => {
        const ws = XLSX.utils.json_to_sheet(a);
        const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
        const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
        const data = new Blob([excelBuffer], { type: fileType });
        FileSaver.saveAs(data, fileName + fileExtension);
    };

    const myfiltredRows = (a) => {
        const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
        const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);
        let data = filteredSortedRowIds.map((id) => {
            const row = {};
            visibleColumnsField.forEach((field) => {
                row[field] = apiRef.current.getCellParams(id, field).value;
            });
            return row;
        });
        let m = JSON.stringify(data, null, 2);
        data.map((d) => { (delete d._check_, delete d.action) })
        console.info(data)
        Export(data, fileName)
        // arrayToExcel(data)
    };

    return (
        <GridToolbarContainer>
            <Button
                {...buttonBaseProps}
                onClick={(e) => myfiltredRows(getFilteredRows)
                }> Filtered rows</Button>
        </GridToolbarContainer>
    );
}

这是将我的数组转换为Excel的函数

const Export = (a, fileName) => {
    const ws = XLSX.utils.json_to_sheet(a);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
};  

I'm trying to export my table to an excel file
, so I created a function after fetching my data that convert from array to excel, I worked but it does not export all data
this is an example of what am getting
here
so as you can see the last three columns are empty, I think the problem is that the date is array data , but I don't know-how
this is my code :

import {
    GridToolbarContainer,
    gridVisibleSortedRowIdsSelector,
    gridFilteredSortedRowIdsSelector,
    gridVisibleColumnFieldsSelector
} from "@mui/x-data-grid";


const CustomToolbar = () => {

    const apiRef = useGridApiContext();
    const getFilteredRows = ({ apiRef }) => gridVisibleSortedRowIdsSelector(apiRef);
    const handleExport = (options) => apiRef.current.exportDataAsCsv(options);
    const fileType = "application/vnd.ms-excel;charset=utf-8";
    const fileExtension = ".xlsx";
    const fileName = "myfile";
    const buttonBaseProps = {
        color: "primary",
        size: "small",
    };

    // const arrayToExcel = (a) => {}
    const Export = (a, fileName) => {
        const ws = XLSX.utils.json_to_sheet(a);
        const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
        const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
        const data = new Blob([excelBuffer], { type: fileType });
        FileSaver.saveAs(data, fileName + fileExtension);
    };

    const myfiltredRows = (a) => {
        const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
        const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);
        let data = filteredSortedRowIds.map((id) => {
            const row = {};
            visibleColumnsField.forEach((field) => {
                row[field] = apiRef.current.getCellParams(id, field).value;
            });
            return row;
        });
        let m = JSON.stringify(data, null, 2);
        data.map((d) => { (delete d._check_, delete d.action) })
        console.info(data)
        Export(data, fileName)
        // arrayToExcel(data)
    };

    return (
        <GridToolbarContainer>
            <Button
                {...buttonBaseProps}
                onClick={(e) => myfiltredRows(getFilteredRows)
                }> Filtered rows</Button>
        </GridToolbarContainer>
    );
}

this is the function that converts my array to excel

const Export = (a, fileName) => {
    const ws = XLSX.utils.json_to_sheet(a);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
};  

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文