vue elementui 页面预览导入excel表格数据

html代码：

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>数据预览</span>
      </div>
      <div  class="text item">
	<el-table :data="tableData" border highlight-current-row style="width: 100%;">
            <el-table-column  :label="tableTitle" >
                 <el-table-column min-width="150" v-for='item tableHeader' :prop="item" :label="item" :key='item'>
	         </el-table-column>
	      </el-table-column>
	</el-table>
      </div>
</el-card>

js代码：

import XLSX from 'xlsx'

data() {
    return {
        tableData: '', 
        tableHeader: '' 
    }
},
mounted: {
    document.getElementsByClassName('el-upload__input')[0].setAttribute('accept', '.xlsx, .xls')
    document.getElementsByClassName('el-upload__input')[0].onchange = (e) => {
        const files = e.target.filesconst itemFile = files[0] // only use files[0]if (!itemFile) 
        return  this.readerData(itemFile)
    }
},
methods: {
    generateDate({ tableTitle, header, results }) {
        this.tableTitle = tableTitle
        this.tableData = results
        this.tableHeader = header
    },
    handleDrop(e) {
        e.stopPropagation()
        e.preventDefault()
        const files = e.dataTransfer.files
        if (files.length !== 1) {
            this.$message.error('Only support uploading one file!')
            return
        }
        const itemFile = files[0] // only use files[0]
        this.readerData(itemFile)
        e.stopPropagation()
        e.preventDefault()
    },
    handleDragover(e) {
        e.stopPropagation()
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
    },
    readerData(itemFile) {
        if (itemFile.name.split('.')[1] != 'xls' && itemFile.name.split('.')[1] != 'xlsx') {
            this.$message({message: '上传文件格式错误，请上传xls、xlsx文件！',type: 'warning'});
          } else {
            const reader = new FileReader()
            reader.onload = e => {
                const data = e.target.result
                const fixedData = this.fixdata(data)
                const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
                const firstSheetName = workbook.SheetNames[0] // 第一张表 sheet1
                const worksheet = workbook.Sheets[firstSheetName] // 读取sheet1表中的数据              delete worksheet['!merges']let A_l = worksheet['!ref'].split(':')[1] //当excel存在标题行时
                worksheet['!ref'] = `A2:${A_l}`
                const tableTitle = firstSheetName
                const header = this.get_header_row(worksheet)
                const results = XLSX.utils.sheet_to_json(worksheet)
                this.generateDate({ tableTitle, header, results })
              }
                reader.readAsArrayBuffer(itemFile)
          }
    },
    fixdata(data) {
        let o = ''
        let l = 0
        const w = 10240
        for (; l < data.byteLength / w; ++l) 
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
        return o
    },
    get_header_row(sheet) {
        const headers = []
        const range = XLSX.utils.decode_range(sheet['!ref'])
        let Cconst R = range.s.r /* start in the first row */
        for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
            var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
            var hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t) 
            hdr = XLSX.utils.format_cell(cell)
            headers.push(hdr)
        }
        return headers
    }