為了獲取excel表格信息問遍了度娘，但是結(jié)果很不爽长已，看了十個文章九個是一樣的畜眨，剩下那個不一樣是因?yàn)閺?fù)制的時候沒復(fù)制全！Ｊ跷汀康聂！不止這些，復(fù)制也就算了胞四，你也得給截圖和注釋啊早抠，整個帖子赤裸裸的代碼什么意思啊撬讽？蕊连？？
為了造福眾多單身屌絲們游昼。我覺得給之前的帖子的代碼寫明用法甘苍，各位如果覺得哥們兒某句解釋寫的不是很明白可以吐槽，我好改進(jìn)烘豌，嘿嘿载庭，下面進(jìn)入正題吧騷年們
一、首先需要需要引入需要的包
這里是cdn引入的，不用下載囚聚，所以直接復(fù)制用就行了靖榕，不用那么麻煩自己去網(wǎng)上找包
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
二、一個上傳文件的file類型的input標(biāo)簽
這里給它起個id就叫excel-file吧
<input type="file" id="excel-file">
三顽铸、js相關(guān)操作對選中.xls文件進(jìn)行解析茁计，獲取數(shù)據(jù)
//給input標(biāo)簽綁定change事件，一上傳選中的.xls文件就會觸發(fā)該函數(shù)
$('#excel-file').change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result
var workbook = XLSX.read(data, {
type: 'binary'
}) // 以二進(jìn)制流方式讀取得到整份excel表格對象
var persons = []; // 存儲獲取到的數(shù)據(jù)
} catch (e) {
console.log('文件類型不正確');
return;
}
// 表格的表格范圍谓松，可用于判斷表頭是否數(shù)量是否正確
var fromTo = '';
// 遍歷每張表讀取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表星压，就取消注釋這行
}
}
//在控制臺打印出來表格中的數(shù)據(jù)
console.log(persons);
};
// 以二進(jìn)制方式打開文件
fileReader.readAsBinaryString(files[0]);
});
四、上傳的.xls表格的信息
| 凄凄切切 | 1 | 1111 |
|---|---|---|
| 44444 | 2 | 1112 |
| 44445 | 3 | 1113 |
| 44446 | 4 | 1114 |
| 44446 | 5 | 1115 |
| 44448 | 6 | 1116 |
| 44449 | 7 | 1117 |
| 44450 | 8 | 1118 |
| 44451 | 9 | 1119 |
| 44452 | 10 | 1120 |
| 44453 | 11 | 1121 |
| 44454 | 12 | 1122 |
| 44455 | 13 | 1123 |
| 44456 | 1124 | |
| 3www | ||
| qqqq |
五鬼譬、運(yùn)行結(jié)果
運(yùn)行結(jié)果.png
讓我們爽的是他返回的是json數(shù)組娜膘，這真是太方便我們操作了，但是有的吃瓜群眾可能看不懂了优质，就一個‘凄凄切切’數(shù)據(jù)竣贪，怎么出來那么多，
其實(shí)我們excel表的第一行它默認(rèn)為表頭巩螃，也就是說,'1','1111',‘凄凄切切’這三個都是表頭演怎，它們的健值對所對應(yīng)的值就是這一列的值，數(shù)組下表對應(yīng)的則是表格的一行數(shù)據(jù)
六牺六、最通俗易懂的解釋
如果有的好漢看了之后也沒懂颤枪，但是就是想拿過來直接用的話汗捡，那些下面直接copy運(yùn)行就ok啦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
</head>
<body>
<input type="file" id="excel-file">
<script>
$('#excel-file').change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二進(jìn)制流方式讀取得到整份excel表格對象
persons = []; // 存儲獲取到的數(shù)據(jù)
} catch (e) {
console.log('文件類型不正確');
return;
}
// 表格的表格范圍淑际，可用于判斷表頭是否數(shù)量是否正確
var fromTo = '';
// 遍歷每張表讀取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表，就取消注釋這行
}
}
console.log(persons);
};
// 以二進(jìn)制方式打開文件
fileReader.readAsBinaryString(files[0]);
});
</script>
</body>
</html>
如果各位看了有收獲的話請記得點(diǎn)個贊扇住，火箭刷起來４郝啤！艘蹋！
程序員必備圖.png
