正文

关于Vue+iview的前端简单的导入数据（excel）

IP云
IP云V管理员/45 阅读
08/04
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

前一段时间项目经历了纯前端处理导入excel文件并处理等问题，数据量大的时候时间上长的一比，三千条数据需要三四秒甚至更长，不管产品咋想的，具体做法为：

首先下载一个这玩意：

进行简单封装一下：

<template>
<span>
<input v-if="isShow" class="input-file" type="file" @change="exportData"
accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<Button type="primary" @click="btnClick">导入数据</Button>
</span>
</template><script>
import XLSX from 'xlsx' export default {
name: "inputExcel",
props: {
type: String,
default: "选择excel文件"
},
data() {
return {
isShow: true
}
},
methods: {
btnClick() { if (this.isShow === false) {
this.isShow = true
setTimeout(this.querry, )
} else {
this.querry()
} }, querry() { document.querySelector(".input-file").click();
},
exportData(event) { if (!event.currentTarget.files.length) {
return;
}
const that = this;
// 拿取文件对象
var f = event.currentTarget.files[];
// 用FileReader来读取
var reader = new FileReader();
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = function (f) {
var binary = "";
var wb; // 读取完成的数据
var outdata; // 你需要的数据
var reader = new FileReader();
reader.onload = function (e) {
// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = ; 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[]]);
// 自定义方法向父组件传递数据
that.$emit("getResult", outdata);
};
reader.readAsArrayBuffer(f);
};
reader.readAsBinaryString(f);
this.isShow = false
}
}
}
</script><style scoped>
.input-file {
display: none;
}
</style>

并在需要的地方引用：

数据处理：

getMyExcelData(data) {
//处理你的数据
console.log('getMyExcelData', data);
let current = this;
util.showMsg(this, {succ: '导入数据成功'});
data.map(function (value, index) {
let bool = false;
current.test_content.map(function (value1, i) {
if (value1.modDataCode === value.modDataCode) {
bool = true;
}
})
if (!bool) {
current.test_content.push(value);
}
});
this.test_content_clone = this.clone(this.test_content)
},

时间有点长了，应该就这些。

<template>
<span>
<input v-if="isShow" class="input-file" type="file" @change="exportData"
accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<Button type="primary" @click="btnClick">导入数据</Button>
</span>
</template>
<script>
import XLSX from 'xlsx'
export default {
name: "inputExcel",
props: {
type: String,
default: "选择excel文件"
},
data() {
return {
isShow: true
}
},
methods: {
btnClick() {
if (this.isShow === false) {
this.isShow = true
setTimeout(this.querry, )
} else {
this.querry()
}
},
querry() {
document.querySelector(".input-file").click();
},
exportData(event) {
if (!event.currentTarget.files.length) {
return;
}
const that = this;
// 拿取文件对象
var f = event.currentTarget.files[];
// 用FileReader来读取
var reader = new FileReader();
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = function (f) {
var binary = "";
var wb; // 读取完成的数据
var outdata; // 你需要的数据
var reader = new FileReader();
reader.onload = function (e) {
// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = ; 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[]]);
// 自定义方法向父组件传递数据
that.$emit("getResult", outdata);
};
reader.readAsArrayBuffer(f);
};
reader.readAsBinaryString(f);
this.isShow = false
}
}
}
</script>
<style scoped>
.input-file {
display: none;
}
</style>