用javascript编写一个函数，将上传的excel表格数据转换为json

Question

我正在开发一个 MERN 项目，该项目需要上传 Excel 工作表并将其数据转换为 JSON 以在表格中呈现。我正在使用 xlsx 反应库。为此，我在 javascript 中编写了一个函数，该函数将在其他组件中调用以获得所需的结果。 但是我得到的结果是未定义的。

import * as XLSX from 'xlsx'

const excelSheetUpload = (file) =>{
    const fileType = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"]
    let selectedFile = file[0]   
    let reader = new FileReader();
    reader.readAsArrayBuffer(selectedFile)
    reader.onload = (e) => {
    const workbook = XLSX.read(e.target.result, {type:'buffer' });
    const worksheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[worksheetName];
    const data = XLSX.utils.sheet_to_json(worksheet);
    return data;
  }
}

export default excelSheetUpload;

当我在反应组件中使用上述函数并将输入作为

excelSheetUpload(event.target.files)

时，我得到了未定义。 javascript 函数可能存在一些错误。

Answer 1

const excelSheetUpload = (file, callback) =>{
    const fileType = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"]
    let selectedFile = file[0]   
    let reader = new FileReader();
    reader.readAsArrayBuffer(selectedFile)
    reader.onload = () => {
        const workbook = XLSX.read(reader.result, {type:'buffer' });
        const worksheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[worksheetName];
        const data = XLSX.utils.sheet_to_json(worksheet);
        callback(data);
    }
}

你的excelSheetUpload方法将立即返回，然后onload将被调用。这就是为什么你变得不确定。

您可以创建一个反应状态并在 onload 提供数据时更新该状态。 使用 useEffect 监控该状态，并在获取数据后将数据转换为 json。

或

您可以将回调函数传递给 excelSheetUpload 并在 onload 触发器上调用该函数。