函数在页面收费和 outerHTML 错误时启动

Question

我试图在 React 中创建一个带有 javascript 函数的 Excel Sheet，但是当我尝试进入该页面时，以及具有 onClick 的按钮不工作。


export default function DescargaExcelHTML() {
  const descargaExcel = (tableID, filename = "") => {
    console.log(tableID);
    let downloadLink;
    let datatype = "application/vnd.ms-excel";
    let tableSelect = document.getElementById(tableID);
    let tableHTML = tableSelect.outerHTML.replace(/ /g, "%20");
    filename = filename ? filename + ".xlsx" : "excel_data.xlsx";
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);

    if (navigator.msSaveOrOpenBlob) {
      let blob = new Blob(["\ufeff", tableHTML], { type: datatype });
      navigator.msSaveOrOpenBlob(blob, filename);
    } else {
      downloadLink.href = "data:" + datatype + "," + tableHTML;
      downloadLink.download = filename;
      downloadLink.click();
    }
  };

  return (
    <>
      <div className="overflow-x-auto">
        <table id="prueba" className="table w-full">
          <thead>
            <tr>
              <th></th>
              <th>Name</th>
              <th>Job</th>
              <th>Favorite Color</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>Cy Ganderton</td>
              <td>Quality Control Specialist</td>
              <td>Blue</td>
            </tr>
          </tbody>
        </table>
      </div>
      <button
        className="btn btn-primary"
        onClick={descargaExcel("prueba", "pruebaDescarga")}
      >
        Download Excel
      </button>
    </>
  );
}

此外，当我刷新页面时，出现 outerHTML 错误：

Uncaught TypeError: Cannot read properties of null (reading 'outerHTML') 行 let tableHTML = tableSelect.outerHTML.replace(/ /g, "%20");

Answer 1

尝试更改：
onClick={downloadExcel("test", "testDownload")}
通过：
onClick={() => downloadExcel("test", "testDownload")}

函数在页面收费和 outerHTML 错误时启动

Function starts when page charges and outerHTML error

javascript

excel

reactjs