先安装插件
npm install file-saver -S
npm install xlsx -S封装组件
<template>
<div style="display: inline;">
<input ref="upload-input" class="upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<button class="d_btn font14 text_white bg_blue" @click="handleUpload">
{{text}}
</button>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
props: {
text: {
type: String,
default: '导入'
},
beforeUpload: Function, // eslint-disable-line
onSuccess: Function// eslint-disable-line
},
data() {
return {
loading: false,
excelData: {
header: null,
results: null
}
}
},
methods: {
handleData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
handleUpload() {
this.$refs['upload-input'].click()
},
handleClick(e) {
const files = e.target.files
const rawFile = files[0]
if (!rawFile) return
this.upload(rawFile)
},
upload(rawFile) {
this.$refs['upload-input'].value = null
if (!this.beforeUpload) {
this.readerData(rawFile)
return
}
const before = this.beforeUpload(rawFile)
if (before) {
this.readerData(rawFile)
}
},
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.handleData({ header, results }) this.loading = false
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
for (C = range.s.c; C <= range.e.c; ++C) {
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
let hdr = 'UNKNOWN ' + C
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
}
}
</script>
