React-导出-EXCEL导出时如何隐藏EXCEL中的列？

n53p2ov0 于 2022-09-18 发布在 Java

关注(0)|答案(2)|浏览(212)

bounty将在13小时后到期。对这个问题的回答有资格获得+100的声誉奖励。Yuno正在寻找来自可靠来源的答案。

您好，我希望标题足以理解我的问题，导出数据时没有错误，我只是希望如果复选框未选中或为假，则在导出时会隐藏EXCEL的EXCEL列，如果复选框选中或为真，则在导出EXCEL时会显示或显示EXCEL列

const [filteredData, setfilteredData] = useState(false)
const [checked, setChecked] = React.useState(false);
const handleDisplay = (event) => {
    console.log(event.target.checked)
    setChecked(event.target.checked);
}
....,

<Checkbox checked={checked} onChange={handleDisplay}  /> Display Name<br></br>

 <ExcelExported exportClass={'admin-add-btn'} filteredData={filteredData} checked={checked}></ExcelExported>

ExcelExported.js

import React from 'react'
import ReactExport from 'react-export-excel'
import { Button } from '@material-ui/core'

const ExcelFile = ReactExport.ExcelFile
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

function ExcelExported(props) {

    const { exportClass, filteredData, checked } = props
    console.log(checked)
    const fileNameFormatted = 'Student Information'
    return (
        <div>
            <ExcelFile filename="Student Information" element={
                <Button style={{ textTransform: 'none', minWidth: '240px' }}
                    className={exportClass}
                    variant='contained'
                // onClick={handlePrint}
                >
                    Export
                </Button>
            }>
                <ExcelSheet data={filteredData} name="Users" >
                    <ExcelColumn label="Student Name" value="name"  hide={checked}/>
                </ExcelSheet>
            </ExcelFile>

        </div >
    )
}

export default ExcelExported

这是我的https://www.npmjs.com/package/react-export-excel库，用于导出Excel表格

到目前为止，我尝试的是将hide={checked}放入没有错误，但甚至取消选中复选框，它会显示该列，我还尝试了以下操作

{checked ? (<ExcelColumn label="Student Name" value="name")/>:(null)}

我收到了这个错误

JavaScript

来源：https://stackoverflow.com/questions/73662128/react-export-excel-how-to-hide-column-in-excel-when-exported

2条答案

按热度按时间

j7dteeu81#

这是因为您将null作为ExcelFile的子组件传入。

让我们定位堆栈跟踪在react-export-excel的源代码中显示的(近似)行。它循环该组件的所有子项，并始终尝试访问它们的props属性。

// src/ExcelPlugin/components/ExcelFile.js

const columns = sheet.props.children;
const sheetData = [
  React.Children.map(columns, column => column.props.label)
];

因此，只有当它的子组件都是具有该预期结构的对象时，该组件才会工作(即不崩溃)。

您将收到与checked && <ExcelColumn/>相同的错误，它将false作为子进程接收。在常规React组件中，null和false都被忽略。但是因为这个组件使用React.children循环它，所以它只获得您放入其中的确切列表。

再往下看，它似乎也无法阻止列被包括在内。您可以尝试传入其他内容，但它可能仍将作为一个额外的逗号分隔列包含在内。

也许这个库也可以通过忽略这些值来促进这一点。不过，这可能会变得棘手。因为列数总是需要与数据匹配。因此，该组件目前没有提供这种级别的灵活性是可以理解的。

替代方案

您可以在DataSet对象中定义列，而不是使用<ExcelColumn/>组件。example from their documentation：

const multiDataSet = [
  {
    columns: [
      { value: "Name", widthPx: 50 }, // width in pixels
      { value: "Salary", widthCh: 20 }, // width in charachters
    ],
    data: [
      // ...
    ],
  },
  // ...
];

// ...
<ExcelSheet dataSet={multiDataSet} name="Organization"/>

通过这种方式，您可以直接控制columns列表，并可以根据某些钩子值对其进行过滤。

const allColumns = [{value: "columnA"}, {value: "columnB"} /* ... */];
const [hiddenColumns, setHiddenColumns] = useState([]);
const dataSet = {
  // ...
  columns: allColumns.filter(column => !hiddenColumns.includes(column.value));
}

return <ExcelFile><ExcelSheet {...{dataSet}}/></ExcelFile>;

赞(0）回复(0）举报 2022-09-18

n1bvdmb62#

希望这能奏效

{checked && <ExcelColumn label="Student Name" value="name"/>}

赞(0）回复(0）举报 2022-09-18

我来回答

React-导出-EXCEL导出时如何隐藏EXCEL中的列？

2条答案

替代方案

相关问题

热门标签

最新问答