使用xlsx导入excel文件

原文地址：https://qxiaomay.github.io/2018/07/13/vue%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%85%A5%E5%B9%B6%E8%A7%A3%E6%9E%90excel%E8%A1%A8%E6%A0%BC%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97/

安装xlsx插件

// 安装插件
npm install xlsx --save

// 在vue中导入XLSX
import XLSX from 'xlsx'

这里使用 element-ui 的上传组件
关闭默认上传的操作，在on-change事件上绑定importExcel上传函数
如果用传统的input上传组件也可以<input type="file" @change="importExcel($event.target)" />

<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) {
    alert('格式错误！请重新选择')
    return
  }
  this.file2Xce(file).then(tabJson => {
    if (tabJson && tabJson.length > 0) {
      this.xlsxJson = tabJson
      // 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方法
  })
}