使用xlsx预处理表格数据

使用xlsx预处理表格文件

https://github.com/SheetJS/js-xlsx

https://github.com/SheetJS/js-xlsx/tree/master/demos/vue

<input type="file" @change="handleFile" />
<v-table :data-source="tbody" :columns="thead" v-if="tbody.length > 0"></v-table>
<v-message type="error" show-icon v-if="batchError">{{ batchError }}}</v-message>
<v-button v-if="showBatchBtn" primary @click.native="batchSubmit" style="margin-top: 15px;">开始录入</v-button>

import XLSX from 'xlsx'


thead: [],
tbody: [],
showBatchBtn: false,
batchError: ''


batchSubmit () {
  console.log(this.tbody)
}



handleFile (e) {
  this.thead = []
  this.tbody = []
  this.showBatchBtn = false
  this.batchError = ''

  // https://github.com/SheetJS/js-xlsx#parsing-workbooks
  let rABS = true // true: readAsBinaryString ; false: readAsArrayBuffer
  let files = e.target.files
  let f = files[0]
  let reader = new window.FileReader()
  reader.onload = (e) => {
    let data = e.target.result
    if (!rABS) data = new window.Uint8Array(data)
    let workbook = XLSX.read(data, {type: rABS ? 'binary' : 'array'})
    let worksheet = workbook.Sheets[workbook.SheetNames[0]]
    let result = XLSX.utils.sheet_to_json(worksheet, {header: 1})
    let firstRow = result.slice(0, 1)[0]
    console.log(firstRow)
    this.thead = firstRow.map((item, index) => {
      return {
        title: item,
        dataIndex: index,
        key: index
      }
    })
    this.tbody = result.slice(1)
    // 简单校验表格内容格式是否规范
    if (firstRow[0] !== '标题') {
      this.batchError = '内容格式不规范，请参考模板文件'
      return
    }
    this.showBatchBtn = true
  }
  if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f)
}