前端excel文件上传

前端excel文件上传

使用element-plus上传ecxcel文件

步骤

1. 下载xlsx库：npm install xlsx
2. 导入xlsx:import * as XLSX from ‘xlsx’
3. 使用element-plus的el-upload组件
4. 编写文件上传函数

 
    
      
      

        拖拽文件到此处或者 点击上传
      
      
    

uploadHandler(data) {
      //安装xlsx库
      // npm install xlsx
      //这是文件上传
      const file = data.file
      console.log(file)
      //创建一个文件读取的实例
      const reader = new FileReader()
      console.log(reader)
      //读取成一个Buffer格式文件
      reader.readAsArrayBuffer(file)
      //当onload执行时，文件已经读取完成
      reader.onload = async (e) => {
        console.log(e.target.result)
        const fileData = e.target.result
        //利用XLSX对数据进行解析
        const wordbook = await XLSX.read(fileData, { type: Array })
        console.log(wordbook, "wordbook")
        //获取一张表的表名
        const sheetName = wordbook.SheetNames[0]
        //根据表名拿到表里面的内容
        const sheetData = wordbook.Sheets[sheetName]
        //解析成JSON
        const json = XLSX.utils.sheet_to_json(sheetData)
        console.log(json, "json")
        this.tableData = json

      }

效果图：


注意：以上就是今天的分享啦