99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
|
<div class=" app-container m-upload-excel">
|
|
<el-upload
|
|
style="width: 100%"
|
|
class="upload-demo"
|
|
drag
|
|
action="/"
|
|
:before-upload="beforeUploadAction"
|
|
type="file" accept=".xlsx, .xls"
|
|
>
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">
|
|
拖拽上传 <em>或者点击上传 Excel</em>
|
|
</div>
|
|
</el-upload>
|
|
<div>
|
|
<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'>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const ExcelJS = require("exceljs");
|
|
|
|
export default {
|
|
data(){
|
|
return{
|
|
tableData:[],
|
|
tableHeader:[]
|
|
}
|
|
},
|
|
methods:{
|
|
beforeUploadAction(file, fileLi){
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.onload = async e => {
|
|
const data = e.target.result
|
|
const workbook = new ExcelJS.Workbook();
|
|
try {
|
|
let res = await workbook.xlsx.load(data)
|
|
const sheets =
|
|
res._worksheets &&
|
|
res._worksheets.filter((item) => typeof item !== "undefined");
|
|
const table = [];
|
|
let headers = []
|
|
sheets.forEach((sheet) => {
|
|
sheet._rows.forEach((row,index) => {
|
|
if(index===0){
|
|
row.values.forEach(it=>{
|
|
headers.push(it)
|
|
})
|
|
}else {
|
|
let obj = {}
|
|
let arr = []
|
|
row.values.forEach(it=>{
|
|
arr.push(it)
|
|
})
|
|
headers.forEach((ite,i)=>{
|
|
obj[ite] = arr[i]
|
|
})
|
|
table.push(obj);
|
|
}
|
|
// const tableRow = {
|
|
// position: "",
|
|
// val: "",
|
|
// };
|
|
// row._cells.forEach((cell) => {
|
|
// tableRow.position = cell._address;
|
|
// tableRow.val = cell._value.model.value || "";
|
|
// });
|
|
});
|
|
});
|
|
this.tableData = table
|
|
this.tableHeader = headers
|
|
}catch (e){
|
|
this.$message.error('解析失败')
|
|
}
|
|
}
|
|
reader.readAsArrayBuffer(file)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep{
|
|
.el-upload{
|
|
width: 100%;
|
|
}
|
|
.el-upload-dragger{
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|