上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

react中使用xlsx读取excel文件(工程化脚本开发)

[复制链接]
  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-11-26 21:03:44 | 显示全部楼层 | 阅读模式

    只能说工程化了好多问题都不是问题了

    npm install xlsx(我没成功可能是q的原因用的cnpm i xlsx)

    然后直接引入用就好了(import * as XLSX from 'xlsx'; 我之前写 import XLSX from 'xlsx'报错了,不知道是不是vite的原因不确定)

    import { useEffect } from 'react';
    import { useState, Fragment } from 'react';
    import * as XLSX from 'xlsx';
    import './App.css'
    
    function App() {
      const onImportExcel = (file) => {
         // 获取上传的文件对象
         const { files } = file.target;
         // 通过FileReader对象读取文件
         const fileReader = new FileReader();
         fileReader.onload = event => {
           try {
             const { result } = event.target;
             // 以二进制流方式读取得到整份excel表格对象
             const workbook = XLSX.read(result, { type: 'binary' });
             let data = []; // 存储获取到的数据
             // 遍历每张工作表进行读取(这里默认只读取第一张表)
             for (const sheet in workbook.Sheets) {
               if (workbook.Sheets.hasOwnProperty(sheet)) {
                 // 利用 sheet_to_json 方法将 excel 转成 json 数据
                 data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                 // break; // 如果只取第一张表,就取消注释这行
               }
             }
             console.log(data);
           } catch (e) {
             // 这里可以抛出文件类型错误不正确的相关提示
             console.log('文件类型不正确');
             return;
           }
         };
         // 以二进制方式打开文件
         fileReader.readAsBinaryString(files[0]);
      }
    
      return (
        <Fragment>
           <div class='jb_content'>
            <input type='file' accept='.xlsx, .xls' onChange={(file) => { onImportExcel(file) }} />
           </div>
        </Fragment>
      );
    }
    
    export default App;

    image.png

    image.png

    I frequently record, because want to leave something.
  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-11-26 21:18:04 | 显示全部楼层
    确实,需要的一个npm i就可以引入了,方便很多
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    55

    回帖

    84

    积分

    初级工程师

    积分
    84
    发表于 2022-11-27 00:58:30 | 显示全部楼层

    我之前写 import XLSX from 'xlsx'报错了,不知道是不是vite的原因不确定)

    import XLSX from 'xlsx'

    会报错是因为 xlsx 本来就没有默认导出,只有具名导出

    这不是 vite 的问题,属于 ESM 模块规范问题

    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表