在React表中显示Excel数据

时间:2019-05-03 06:22:29

标签: excel reactjs csv sheetjs

我正在尝试在反应表中显示Excel数据值。到目前为止,我已经可以通过以下方法在检查工具中将excel文件数据读取为csv数据。要将Excel数据转换为csv,我正在使用SheetJs。

    handleFiles = event => {
        var fileType = "xlsx";

        if (event.target.files && event.target.files[0]) {
          var extension = event.target.files[0].name
              .split(".")
              .pop()
              .toLowerCase(), //file extension from input file
            isSuccess = fileType.indexOf(extension) > -1; //is extension in acceptable types

          if (isSuccess) {
            //yes
            var reader = new FileReader();

            reader.onload = event => {
              alert("Valid File extension");

              const bstr = event.target.result;

              const wb = XLSX.read(bstr, { type: "binary" });

              console.log("data>>>", wb);
              /* Get first worksheet */
              const wsname = wb.SheetNames[0];
              const ws = wb.Sheets[wsname];
              /* Convert array of arrays */

              const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
              /* Update state */
              console.log("Data>>>", data);
            };
            reader.readAsBinaryString(event.target.files[0]);
          } else {
            //no
            alert("Invalid File Type ");
          }
        }


 }

;

这是按钮调用方法:

 <input
        type="file"
        name="file"
        onChange={e => this.handleFiles(e)}
     />

数据在检查工具中显示如下。

enter image description here

数据对象也显示在下方

enter image description here

有人可以帮我在反应表中显示这些数据吗?

0 个答案:

没有答案