components/HelloWorld.vue

  <div class="hello">
    <el-button type="success" >导出</el-button>
    <hr>
    <el-upload class="upload-demo" accept=".xlsx,.csv,.xls" action="" :show-file-list="true" :on-change="importExcel">
      <el-button type="primary">导入</el-button>
    </el-upload>
    <hr>
    <el-table :data="tableData" style="width:100%" class="table">
      <el-table-column prop="id" label="序号" width="180" name=""></el-table-column>
      <el-table-column prop="name" label="姓名" width="180" name=""></el-table-column>
      <el-table-column prop="age" label="年龄" width="180" name=""></el-table-column>
      <el-table-column prop="address" label="地址" name=""></el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default{
  name: 'HelloWorld',
  data(){
    return {
      tableData:[]
    }
  },
  methods:{
    importExcel(file) {
      let that = this
      // console.log(file,'表')
      let { raw } = file
      //读取文件内容
      let render = new FileReader()
      //按照字节读取文件内容，再用ArrayBuffer表示
      render.readAsArrayBuffer(raw)
      render.onload = function () {  //文件加载完触发回调
        // 将读取的文件内容保存到一个 ArrayBuffer 对象
        const buffer = render.result
        //将 ArrayBuffer 对象转换为 Uint8Array 类型的字节数组
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          // 将字节数组逐字节转换为字符，并拼接成字符串
          binary += String.fromCharCode(bytes[i])
        }
        // 使用 XLSX 库的 read 函数解析二进制字符串为工作簿对象
        const bg = XLSX.read(binary, { type: 'binary' })
        // 获取工作簿的第一个工作表
        const outData = XLSX.utils.sheet_to_json(bg.Sheets[bg.SheetNames[0]])
        console.log(outData,'数据')
        let outarr = [...outData]
        let arr = []
        // 将工作表的每一行数据映射为新的对象，并添加到 arr 数组中
        outarr.map(v => {
          let obj = {}
          obj.id = v.序号
          obj.name = v.姓名
          obj.age = v.年龄
          obj.address = v.地址
          arr.push(obj)
        })
        // 将处理后的数据赋值给组件的 tableData 属性
        that.tableData = arr
      }
    },
  }
}
</script>

<style scoped>

</style>