前端excel文件上传

前端excel文件上传

使用element-plus上传ecxcel文件

步骤

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

 <!-- 文件上传 -->
    <el-upload class="upload-demo" drag multiple :show-file-list="false" accept=".xlsx" :http-request="uploadHandler">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或者 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          格式为xlsx 文件大小小于500KB
        </div>
        <el-table :data="tableData" v-if="tableData.length">
          <el-table-column v-for="(value, key) in tableData[0]" :key="key" :prop="key" :lable="key">
          </el-table-column>
        </el-table>
      </template>
    </el-upload>

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

      }

效果图：


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