javascript - 从 onClick 处理程序下载 react-export-excel

Question

我正在使用“react-export-excel”库将 json 导出到 excel。
单击按钮时这确实有效，但我想要的过程是:

将 onClick 添加到按钮而不立即下载文件

在 onClick 事件中，显示一个加载器

然后下载文件

然后在文件下载后隐藏加载器

 <ExcelFile
     filename="Companies"
     element={<Button variant="dark-green" onClick={downloadCompanies}>Download</Button>}>
     <ExcelSheet data={companyExport.length > 0 && companyExport} name="Companies">


         <ExcelColumn label="Company Name" value="name"/>
          <ExcelColumn label="Address" value="address"/>
          <ExcelColumn label="Town" value="town"/>
          <ExcelColumn label="Postcode" value="postcode"/>
          <ExcelColumn label="Phone" value="telephone"/>
          <ExcelColumn label="Website" value="website"/>
     </ExcelSheet>

    const downloadCompanies = e => {
        setDownloadingLoader(true)
        // Download file now
    }

    // Some event listener when the file has downloaded to hide loader

有谁知道这个库可以实现这一点？任何帮助将不胜感激。

Answer 1

不确定您是否仍在寻找答案；我需要实现同样的目标；我想我要做的是拥有我自己的按钮，而不是上面列出的下载按钮；该按钮的 onclick 事件我将触发 ExcelFile 附加的按钮的单击事件。你显然会改变

<ExcelFile
     filename="Companies"
     element={<Button variant="dark-green" onClick={downloadCompanies}>Download</Button>}>
     <ExcelSheet data={companyExport.length > 0 && companyExport} name="Companies">

至

<ExcelFile
     filename="Companies"
     element={<Button innerRef={this.buttonRef}></Button>}>
     <ExcelSheet data={companyExport.length > 0 && companyExport} name="Companies">

然后你可以有自己的按钮

<Button variant="dark-green" onClick={downloadCompanies}>Download</Button>

在您的 downloadCompanies 方法中，您将执行以下操作

if (this.buttonRef.current !== null) {
                this.buttonRef.current!.click();
            }

这是我认为我们可以用这个组件做的最好的事情，如果您最终找到了更好的方法或决定使用另一个组件，请告诉我，谢谢!