reactjs 在react js中导出数组列表到excel xlsx

js81xvg6  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(215)

我试图将我的表导出到Excel文件,所以我在获取从数组转换到Excel的数据后创建了一个函数,我工作了,但它并没有导出所有数据这是一个正在获取here的例子,所以你可以看到最后三列是空的,我认为问题是日期是数组数据,但我不知道这是我的代码:

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);
  };
mcvgt66p

mcvgt66p1#

根据您提供的代码片段,您面临的问题似乎是,当您将数据导出到Excel时,一些数组列显示为空。
一个可能的原因是Excel无法识别数组数据类型,因此将列显示为空。若要解决此问题,可以尝试在将数组数据导出到Excel之前将其转换为字符串。
下面是一个示例,说明如何修改代码以在导出之前将数组数据转换为字符串:

const Export = (a, fileName) => {
  // Convert any array data to a string before exporting
  const newData = a.map((item) => {
    const newItem = { ...item };
    Object.keys(item).forEach((key) => {
      if (Array.isArray(item[key])) {
        newItem[key] = item[key].join(", ");
      }
    });
    return newItem;
  });

  const ws = XLSX.utils.json_to_sheet(newData);
  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);
};

在代码的这个修改版本中,我们使用map函数来创建一个新数组,其中任何数组值都使用join函数转换为字符串。然后我们使用这个新数组创建Excel工作表。
请注意,这假设您希望用逗号和空格连接数组值。您可以根据需要进行修改,以匹配您的特定用例。

相关问题