vue实现excel上传获取表格数据

使用mixin.js将方法作为公用方法

import XLSX from 'xlsx'

// mixins.js
export const xlsxMixin = {
  methods: {
    impExcel(e) {
      //导入信息
      const that = this
      let fileName = e.target.files[0]
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        //启动函数
        reader.readAsBinaryString(fileName)
        reader.onload = function (e) {
          const workbook = XLSX.read(e.target.result, { type: 'binary' })
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[firstSheetName]
          const results = XLSX.utils.sheet_to_json(worksheet)
          resolve(results)
        }
      })
    },
  },
}

页面调用

 <input type="file" ref="import" id="impExcel" @change="impExcel" accept=".xlsx"/>

this.impExcel(e).then((res) => {
      console.log(res)
     // res即获取的表格数据，在此做其他处理即可
})