使用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>
  

   

• 上传文件的方法importExce

     

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方法
})
}