导入--EXCEL
1. 引入js
<script src="https://github.com/SheetJS/sheetjs/blob/github/dist/xlsx.full.min.js"></script>
2 定义上传 input
<input class="position-absolute file-style" type="file" id="lead" accept="xlsx"
onchange="importf(this)">
3. 定义获取和解析 excel 对象的方法
//导入
var rABS = false; //是否将文件读取为二进制字符串
var outdata = []
//导入excel方法
function importf(obj) {
if (!obj.files) {
return;
}
var f = obj.files[0];
{
document.getElementById('lead').value = ''
var reader = new FileReader();
// var name = f.name;
reader.onload = function (e) {
var data = e.target.result;
var wb;
if (rABS) {
wb = XLSX.read(data, {
type: 'binary'
});
} else {
var arr = fixdata(data)
wb = XLSX.read(btoa(arr), {
type: 'base64'
});
}
//outdata是从excel中读取的数据，此处为Array数组类型
//注：读取的数据以行为单位，每一行作为一个JS对象，也就是作为Array数组的一个元素，其中，每一行的每一列都是一个属性值(value)，对象的首个键(key)为表格第一行第一列的内容，往后依次为__EMPTY,__EMPTY_1,__EMPTY_2.....
// outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
outdata.length = 0
// outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: ['plc_street', 'plc_value', 'address'] }));
outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
header: ['plc_street', 'plc_value', 'address'],
defval: ''
}));
outdata.splice(0, 1)
readerTable(outdata)
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
// importf.value = null;
}
};
function fixdata(data) {
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
数据都已经被读取出来,但是发现列标题的key是根据表格的第一行命名并且自动忽略了第一行的内容,但是我并不想要key是中文的,而是需要英文的key以便我后续渲染页面使用,所以接下来就是重命名列标题.
outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
header: ['plc_street', 'plc_value', 'address'],
defval: ''
}));
xlsx表格，将有效区域的单元格中的其中一个置为了空，上传之后，该单元格不被识别
outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
header: ['plc_street', 'plc_value', 'address'],
defval: '' //将有效区域的空单元格设置default状态
}));
使用插件js-xlsx进行前端EXCEL文件上传，点击上传同一个文件会造成二次上传不可点击
解决：因使用的是change事件，如下，二次点击同一个文件，不会触发change，故失败
作者：邸琨