前一段时间项目经历了纯前端处理导入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, 150) } 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[0]; // 用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 = 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]]); // 自定义方法向父组件传递数据 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,
150)
}
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[
0];
// 用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 =
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]]);
// 自定义方法向父组件传递数据
that.
$emit(
"getResult",
outdata);
};
reader.
readAsArrayBuffer(
f);
};
reader.
readAsBinaryString(
f);
this.
isShow =
false
}
}
}
</
script
>
<
style
scoped
>
.input-file {
display:
none;
}
</
style
>