vue elementui 页面预览导入excel表格数据
html代码:<el-card class="box-card"><div slot="header" class="clearfix"><span>数据预览</span></div><
·
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
}
更多推荐
已为社区贡献4条内容
所有评论(0)