我正在嘗試在 React 中使用 javascript 函式制作 Excel 作業表，但是當我嘗試進入頁面時，具有 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, " ");
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, " ");
uj5u.com熱心網友回復：
嘗試更改：
onClick={descargaExcel("prueba", "pruebaDescarga")}
通過：
onClick={() => descargaExcel("prueba", "pruebaDescarga")}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477955.html
標籤：javascript 反应 擅长