在前端开发中,可能会遇到前端如何读取Excel文件的数据的需求,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script src="js/xlsx.core.min.js"></script>
<title>上传excel文件并读取数据</title>
</head>
<body>
<input type="file" id="file">
<div id="container" style="width: 400px; height: 400px;"></div>
<script>
$('#file').change(function (e) {
var files = e.target.files;
var fileReader = new FileReader(); // 将文件内容读入内存
fileReader.onload = function (ev) { // 当读取操作成功完成时调用
// console.log(this.result); // 查看文件输出内容
try {
var data = ev.target.result,
//以二进制流方式读取得到表格中数据
workbook = XLSX.read(data, { type: 'binary' }),
info = [];//存储获取到的数据
} catch (e) {
alert('文件类型不正确');
return;
}
var fromTo = '';
//遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
info = info.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
};
//以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
</body>
</html>
说明:
- jquery.js的下载地址:http://www.bootcdn.cn/jquery/
- xlsx.core.min.js的下载地址:https://www.bootcdn.cn/xlsx/