104 lines
3.1 KiB
Vue
104 lines
3.1 KiB
Vue
<template>
|
|
<div style="display: inline-block;width: 100%;height: 100%;margin-top: 5px">
|
|
<input id="excel-upload-input" ref="excel-upload-input" type="file" multiple="multiple" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
|
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
|
将Excel文件拖到这或
|
|
<el-button style="margin-left:16px;" size="small" icon="el-icon-search" type="primary" plain @click="handleUpload">浏览</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import XLSX from 'xlsx'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
excelData: {
|
|
itemFile: [],
|
|
worksheet: []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
generateDate({ itemFile, worksheet }) {
|
|
this.excelData.itemFile.push(itemFile)
|
|
this.excelData.worksheet.push(worksheet)
|
|
},
|
|
handleDrop(e) {
|
|
this.excelData.itemFile = []
|
|
this.excelData.worksheet = [] // 每次拖拽都清空一次
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
const files = e.dataTransfer.files
|
|
for (let i = 0; i < files.length; i++) { // 支持多个文件
|
|
const itemFile = files[i]
|
|
this.readerData(itemFile)
|
|
}
|
|
this.$emit('on-selected-file', this.excelData)
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
},
|
|
handleDragover(e) {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
e.dataTransfer.dropEffect = 'copy'
|
|
},
|
|
handleUpload() {
|
|
this.excelData.itemFile = []
|
|
this.excelData.worksheet = [] // 每次点击“浏览”都清空一次
|
|
document.getElementById('excel-upload-input').click()
|
|
},
|
|
handkeFileChange(e) {
|
|
const files = e.target.files
|
|
for (let i = 0; i < files.length; i++) { // 支持多个文件
|
|
const itemFile = files[i]
|
|
if (!itemFile) return
|
|
this.readerData(itemFile)
|
|
}
|
|
this.$emit('on-selected-file', this.excelData)
|
|
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
|
},
|
|
readerData(itemFile) {
|
|
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] // cjnsheetname
|
|
const worksheet = workbook.Sheets[firstSheetName] // 默认firstsheet
|
|
this.generateDate({ itemFile, worksheet })
|
|
}
|
|
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
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#excel-upload-input{
|
|
display: none;
|
|
z-index: -9999;
|
|
}
|
|
#drop{
|
|
border: 2px dashed #bbb;
|
|
width: 600px;
|
|
line-height: 160px;
|
|
margin: 0;
|
|
font-size: 24px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
color: #bbb;
|
|
position: relative;
|
|
}
|
|
</style>
|