需安装xlsx
<template>
<div>
<el-upload
style="display: inline-block"
action
accept=".xlsx, .xls"
:auto-upload="false"
:show-file-list="false"
:on-change="handle"
>
<el-button type="primary" style="margin-left: 8px">{{ downType }}</el-button>
</el-upload>
</div>
</template>
<script>
import * as XLSX from 'xlsx/xlsx.mjs';
import {defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
components: {},
props: {
downType: {
type: String,
default: '导入',
},
},
emits: ['getFile'],
setup(props, ctx) {
const state = reactive({
excelList: [],
});
const methods = {
readFile(file) {
//文件读取
return new Promise((resolve) => {
let reader = new FileReader();
reader.readAsBinaryString(file); //以二进制的方式读取
reader.onload = (ev) => {
resolve(ev.target.result);
};
});
},
async handle(ev) {
let file = ev.raw;
if (file) {
let data = await methods.readFile(file);
let workbook = XLSX.read(data, {type: 'binary'});
let worksheet = workbook.Sheets[workbook.SheetNames[0]];
let result = XLSX.utils.sheet_to_json(worksheet);
ctx.emit('getFile', result);
}
},
};
return {
...toRefs(state),
...methods,
};
},
});
</script>
<style lang="less" scoped></style>