vue使用xlsx实现上传excel表格并读取到表格数据

今天我们来详细讲解怎样使用xlsx实现前端上传excel表格并读取表格数据。

首先，我们安装xlsx：npm install xlsx --save

然后，我们再使用xlsx，封装一个读取excel表格数据的组件：

<template>
	<span style="margin-right:10px">
    <input class="input-file" type="file" @change="exportData"  
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    <el-button type="primary" size="mini" icon="el-icon-upload" @click="btnClick">上传Excel表格数据</el-button>
  </span>
</template>
 
<script>
import XLSX from xlsx
export default {
          
   
  data() {
          
   
    return {
          
   }
  },
  methods: {
          
   
    btnClick() {
          
   
      document.querySelector(.input-file).click()
    },
    exportData(event) {
          
   
      if (!event.currentTarget.files.length) {
          
   
        return
      }
      const that = this
      // 拿取文件对象
      var f = event.currentTarget.files[0]
      // 用FileReader来读取
      var reader = new FileReader()
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function(f) {
          
   
        var binary = 
        var wb // 读取完成的数据
        var outdata // 你需要的数据
        var reader = new FileReader()
        reader.onload = function(e) {
          
   
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result)
          var length = bytes.byteLength
          for (var i = 0; i < length; i++) {
          
   
            binary += String.fromCharCode(bytes[i])
          }
          // 接下来就是xlsx了，具体可看api
          wb = XLSX.read(binary, {
          
   
            type: binary
          })
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          // 自定义方法向父组件传递数据
          that.$emit(getResult, outdata)
        }
        reader.readAsArrayBuffer(f)
      }
      reader.readAsBinaryString(f)
    }
  }
}
</script>
 
<style>
.input-file {
          
   
  display: none;
}
</style>

然后我们调用该组件：

<template>
<input-excel @getResult="getMyExcelData"></input-excel>
</template>
<script>
import inputExcel from @/components/uploadExcel/uploadExcel
 export default{
          
   
data(){
          
   
return{
          
   }
 },
components:{
          
   
   inputExcel 
 },
methods:{
          
   
  getMyExcelData(data) {
          
   
    // data 为读取的excel数据，在这里进行处理该数据
  }
 }
}
</script>