React项目,基于antd读取excel文件

React项目,基于antd读取excel文件,第1张

SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支启带持良好,并且能在多个语言平台上使用

GitHub地址 GitHub - SheetJS/js-xlsx: SheetJS Community Edition -- Spreadsheet Toolkit

    npm install xlsx --save

    如果安装失败,删除package.lock文件,再执行npm相关命令。

    import *as XLSXfrom 'xlsx'

onImportExcel = file =>{

        let data = []// 存储获取到的数据

        // 通过FileReader对象读取文件

      const fileReader =new FileReader()

      fileReader.readAsBinaryString(file)  //二进制

      fileReader.onload = event =>{

     try {

                    const {result } = event.target

                // 以二进制流方式读取得到整份excel表格对象

                  const workbook = XLSX.read(result, {type:'binary' })

                // 遍历每张工作表进行读取(这里默认只读取第一张表)

                 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

    }

 }

}

<Form.Item label="报表上传">

    <Upload name="excel" action="" listType="text"  accept="file" beforeUpload={this.onImportExcel}     showUploadList={true}>

    <Button>

        <Icon type="upload" />点击上传报表

    </Button>

    </Upload>

</Form.Item>

<input type="file" id="file" onChange={this.jsReadFiles.bind(this)}/>

//蔽和js 读取空枣文斗并拆件


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/12229332.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-22
下一篇 2023-05-22

发表评论

登录后才能评论

评论列表(0条)

保存