引言
后台管理系统中有时会出现需要导入表格的情况,因此查阅资料封装此功能
下载插件
npm i xlsx
封装组件
第一种
<!-- uploadExcel.vue -->
<template>
<div>
<el-upload
ref="upload"
action="/"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
>
<el-button type="warning" icon="el-icon-folder-add">导入表格</el-button>
</el-upload>
</div>
</template>
<script>
import XLSX from 'xlsx';
export default {
data () {
return {
// 上传的文件
fileData: ''
};
},
methods: {
// 文件改变事件
onChange (file) {
// 保存当前选择文件
this.fileData = file;
// 调用读取数据的方法
this.readExcel();
},
// 读取数据
readExcel () {
const files = this.fileData;
if (!files) {
// 没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error('请上传xls或者xlsx文件');
return false;
}
const fileReader = new FileReader();
fileReader.onload = (e) => {
try {
const data = e.target.result;
const workbook = XLSX.read(data, {
type: 'binary'
});
if (workbook.SheetNames.length >= 1) {
this.$message.success('导入成功');
}
// 取第一张表
const wsname = workbook.SheetNames[0];
// 生成json表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
this.$emit('getUploadData', ws);
// 清空value值,不然页面为刷新时无法重复使用
this.$refs.upload.value = '';
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files.raw);
}
}
};
</script>
<style lang="less" scoped>
</style>
页面中使用
<template>
<div>
<upload-excel @getUploadData="getExcelData"></upload-excel>
</div>
</template>
<script>
import UploadExcel from '@/components/table/uploadExcel.vue';
export default {
data () {
return {
// 上传表格处理完成的数据
uploadData: []
};
},
methods: {
getExcelData (data) {
let obj = {};
const list = [];
data.forEach((item) => {
obj = {};
for (const key in item) {
if (key === '日期') {
obj.date = item[key];
} else if (key === '姓名') {
obj.name = item[key];
} else if (key === '地址') {
obj.address = item[key];
} else {
obj.ceshi = item[key];
}
}
list.push(obj);
});
this.uploadData = list;
}
},
components: {
UploadExcel
}
};
</script>
第二种
<!-- index.vue-->
<template>
<div>
<input
class="input-file"
type="file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
@change="exportData"
/>
<button @click="btnClick">导入参数</button>
</div>
</template>
<script>
import XLSX from 'xlsx';
export default {
methods: {
btnClick () {
document.querySelector('.input-file').click();
},
exportData (event) {
if (!event.currentTarget.files.length) {
return;
}
// 拿取文件对象
const f = event.currentTarget.files[0];
// 用FilefileReader 来读取
const fileReader = new FileReader();
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = (f) => {
let binary = '';
let wb; // 读取完成的数据
let outdata; // 你需要的数据
const fileReader = new FileReader();
fileReader.onload = (e) => {
// 读取成Uint8Array,再转换为Unicode编码(Unicode占两个字节)
const bytes = new Uint8Array(fileReader.result);
const length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// 接下来就是xlsx了,具体可看api
wb = XLSX.read(binary, {
type: 'binary'
});
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
// 自定义方法向父组件传递数据
this.$emit('getResult', outdata);
// 清空value值,不然页面为刷新时无法重复使用
document.querySelector('.input-file').value = '';
};
fileReader.readAsArrayBuffer(f);
};
fileReader.readAsBinaryString(f);
}
}
};
</script>
<style scoped>
.input-file {
display: none;
}
</style>
页面中使用
<template>
<div>
<my-table @getUploadData="getExcelData"></my-table>
</div>
</template>
<script>
import MyTable from '@/components/table/index.vue';
export default {
data () {
return {
uploadData: []
};
},
methods: {
getExcelData (data) {
let obj = {};
const list = [];
data.forEach((item) => {
obj = {};
for (const key in item) {
if (key === '日期') {
obj.date = item[key];
} else if (key === '姓名') {
obj.name = item[key];
} else if (key === '地址') {
obj.address = item[key];
} else {
obj.ceshi = item[key];
}
}
list.push(obj);
});
this.uploadData = list;
}
},
components: {
MyTable
}
};
</script>
<style lang="less" scoped>
</style>
根据资料做的修改,仅供参考,具体需求根据项目变动