依托Vue、Element和xlsx? 下載插件復(fù)制代碼即可
當(dāng)然，如果用到樣式的化也需要下載node-sass,sass-loader,其中sass-loader不推薦下載最新版本，會(huì)報(bào)錯(cuò)。
<template>
??<div?class="">
????<el-upload
??????class="upload-demo"
??????drag
??????action=""
??????:auto-upload="false"
??????:limit="3"
??????:multiple="false"
??????accept=".xlsx,?.xls"
??????:on-change="handleFileChange"
??????:on-preview="handleFilePreview"
??????list-type="text">
??????<i?class="el-icon-upload"></i>
??????<div?class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
????</el-upload>
????<el-table?:data="tableData"?border?highlight-current-row?style="width:?100%;margin-top:20px;">
??????<el-table-column?v-for='item?of?tableHeader'?:prop="item"?:label="item"?:key='item.id'>
??????</el-table-column>
????</el-table>
??</div>
</template>
<script>
??import?XLSX?from?'xlsx'
??export?default?{
????data()?{
??????return?{
????????tableData:?[],
????????tableHeader:?[]
??????}
????},
????methods:?{
??????handleFilePreview(f)?{
????????this.handleFileChange(f)
??????},
??????handleFileChange(f,?fileList)?{
????????this.readerData(f.raw)
??????},
??????readerData(file)?{
????????const?reader?=?new?FileReader()
????????reader.onload?=?e?=>?{
??????????let?binary?=?''
??????????const?data?=?e.target.result
??????????const?bytes?=?new?Uint8Array(data)
??????????const?length?=?bytes.byteLength
??????????for?(let?i?=?0;?i?<?length;?i++)?{
????????????binary?+=?String.fromCharCode(bytes[i])
??????????}
??????????const?workbook?=?XLSX.read(binary,?{?type:?'binary'?})
??????????const?firstSheetName?=?workbook.SheetNames[0]
??????????const?worksheet?=?workbook.Sheets[firstSheetName]
??????????const?header?=?this.getHeaderRow(worksheet)
??????????const?results?=?XLSX.utils.sheet_to_json(worksheet)
??????????//?const?fixedData?=?this.fixdata(data)
??????????//?const?workbook?=?XLSX.read(btoa(fixedData),?{?type:?'base64'?})
??????????this.generateDate({?header,?results?})
????????}
????????reader.readAsArrayBuffer(file)
??????},
??????generateDate({?header,?results?})?{
????????this.tableHeader?=?header
????????this.tableData?=?results
????????console.log(this.tableData)
??????},
??????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
??????},
??????getHeaderRow(sheet)?{
????????const?headers?=?[]
????????const?range?=?XLSX.utils.decode_range(sheet['!ref'])
????????let?C
????????const?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?default
??????????if?(cell?&&?cell.t)?hdr?=?XLSX.utils.format_cell(cell)
??????????headers.push(hdr)
????????}
????????return?headers
??????}
????}
??}
</script>
<style?scoped?lang="scss">
??.upload-demo?{
????text-align:?center;
??}
??.upload-demo?/deep/?.el-upload--text?{
????width:?600px;
????margin:?0?auto;
??}
??.upload-demo?/deep/?.el-upload--picture?{
????width:?600px;
????margin:?0?auto;
??}
??.upload-demo?/deep/?.el-upload-dragger?{
????width:?100%;
??}
</style>
