Vue上传XLS文件

data() {
    return {
      tableData:[]
    }
},
//原生JS+XLSX包实现 xls文件上传
methods: {
    //上传excel表格文件
    uploadHandler(data){//对应的是 upload中的 => :http-request="uploadHandler"
      uploadHandler(data) {
      const file = data.file; //上传的excel文件
      // 1 读取到的文件
      const reader = new FileReader(); // 创建一个文件读取的实例
      reader.readAsArrayBuffer(file)
      reader.onload = async (e) => {
          // 当onlaod事件的时候,文件读取完成
          console.log(e.target.result)
          // 2 使用插件转成json格式
          const filedata = e.target.result; // excel文件数据
          // 3 利用XLSX对数据进行解析
          const fileBook = await XLSX.read(filedata, { type: Array })
          // 4 获取第一张表的表名
          const sheetName = fileBook.SheetNames[0];
          // 5 根据第一张表的表名获取这个表里面的内容
          const sheetData = fileBook.Sheets[sheetName]
          // 6 解析数据体
          const json = XLSX.utils.sheet_to_json(sheetData)
          console.log(json)
          // 7 显示在表格中
          this.tableData = json;
      }
    }
  },

 

posted @ 2022-11-24 18:47  LT先生  阅读(134)  评论(0编辑  收藏  举报