vue使用js-xlsx读取excel数据，亲测，可行

js-xlsx是一款非常好的读写excel、xlm、csv等文件的js前端库，这里是它的vue版本读取excel数据的使用方法：

安装：

npm install xlsx --save

引入：

import XLSX from 'xlsx'

布局，使用elementUI上传组件：

<el-upload
    ref="upload"
    action="/"
    :show-file-list="false"
    :on-change="importExcel"
    :auto-upload="false">
    <el-button
      slot="trigger"
      icon="el-icon-upload"
      size="small"
      type="primary">
      上传文件
    </el-button>
</el-upload>

importExcel方法：

importExcel(file) {
  // let file = file.files[0] // 使用传统的input方法需要加上这一步
  const types = file.name.split('.')[1]
  const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
  if (!fileType) {
    this.$message('格式错误！请重新选择')
    return
  }
  this.file2Xce(file).then(tabJson => {
    if (tabJson && tabJson.length > 0) {
      this.xlsxJson = tabJson
      console.log('数据', this.xlsxJson)
      // xlsxJson就是解析出来的json数据,数据格式如下
      // [
      //   {
      //     sheetName: sheet1
      //     sheet: sheetData
      //   }
      // ]
    }
  })
},
file2Xce(file) {
  return new Promise(function(resolve, reject) {
    const reader = new FileReader()
    reader.onload = function(e) {
      const data = e.target.result
      this.wb = XLSX.read(data, {
        type: 'binary'
      })
      const result = []
      this.wb.SheetNames.forEach((sheetName) => {
        result.push({
          sheetName: sheetName,
          sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
        })
      })
      resolve(result)
    }
    reader.readAsBinaryString(file.raw)
    // reader.readAsBinaryString(file) // 传统input方法
  })
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！