方法一
使用xlsx.js插件，支持IE11，不支持ie8
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>讀取Excel</title>
<!--<script src="jquery-2.2.0.js"></script>-->
<script src="jquery.js"></script>
<script src="sheetjs-master/dist/xlsx.full.min.js"></script>
</head>
<body>
<br />
<label for="excel-file" class="btn btn-success">導入Excel文件</label>
<input type="file" name="excel-file" id="excel-file" hidden/>
<br>
<table id="context"></table>
<script>
$('#excel-file').change(function(e) {
try {
new Uint8Array([1,2]).slice(0,2);
} catch (e) {
console.log("[Uint8Array"+e.description+"]這裏使用【Array.slice】。");
//IE或有些瀏覽器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
Uint8Array.prototype.slice = Array.prototype.slice;
}
var url=$('#excel-file').val();
if(!url){return;}
var suffix=url.substring(url.lastIndexOf(".")+1,url.length);
if(!(suffix=="xls"||suffix=="xlsx")){
return alert("文件類型不正確");
}
var files = e.target.files;
var fileReader = new FileReader();
fileReader.readAsArrayBuffer(files[0]);// 以二進制方式打開文件
fileReader.onload = function(ev) {
$('#excel-file').val('');
$("#context").html("");
try {
var data = ev.target.result;
var workbook = XLSX.read(data, { type: 'array'}),
persons = [];
} catch (e) {
console.error(e);
return alert('文件類型不正確!');
}
//遍歷每張表讀取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { raw: true, header: 1 }));
console.log(JSON.stringify(persons));
for ( var i = 0; i <persons.length; i++){
var person=persons[i];
var tr='<tr id="tr-'+i+'">';
for (var j = 0; j <person.length; j++){
tr+='<td>'+$.trim(person[j]?person[j]:"")+'</td>';
}
for (var k = 0; k < (6-person.length); k++) {
tr+='<td></td>';
}
tr += "</td>";
$("#context").append(tr);
}
break;// 如果只取第一張表，就把beak註釋取消
}
}
};
});
</script>
</body>
</html>
方法二
使用IEI瀏覽器自帶的 ActiveXObject 對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
<script>
//解決 IE8 不支持console
window.console = window.console || (function () {
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
= c.clear = c.exception = c.trace = c.assert = function () { };
return c;
})();
function uploads() {
$("#excel-file").click();
}
function Export() {
var url = document.getElementById("excel-file").value;
if (!url) { return; }
var suffix = url.substring(url.lastIndexOf(".") + 1, url.length);
if (!(suffix == "xls" || suffix == "xlsx")) {
return alert("文件類型不正確");
}
importf(url);
}
function importf(url) {//導入
// 獲取 EXCEL json數據
var jsondata = sheet_to_json(url);
var column = [];
var data = [column];
for (var key in jsondata[0]) {//標題
data[0].push(key);
}
for (var i = 0; i < jsondata.length; i++) {
var row = [];
data.push(row);
for (var key in jsondata[i]) {
data[i + 1].push(jsondata[i][key]);
}
}
//console.log(data);
//便利Json對象
var str;
for (var key in data) {///IE8 不支持let寫法,上面寫了js中改爲var 使用IE真是一種折磨（各種奇葩的問題）
console.log(key + '---' + data[key])
str = "<tr>";
for (var key1 in data[key]) {///IE8 不支持let寫法,上面寫了js中改爲var
//console.log(key1 + '---' + data[key][key1])
if (data[key][key1] == "undefined") {
str += "<td> </td>";
} else {
str += "<td>" + data[key][key1] + "</td>";
}
}
str += "</tr>"
$("#tab").append(str);
}
}
function sheet_to_json(filePath) {
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.open(filePath);
oWB.worksheets(1).select();
var oSheet = oWB.ActiveSheet;
var jsondata = [];
//debugger
for (var row = 1; (oSheet.Cells(row, 1) + '') != 'undefined'; row++) { //控制行數
//for (var col = 1; (oSheet.Cells(row, col) + '') != 'undefined'; col++) {
for (var col = 1; col <= 10; col++) {//列需要固定，防止中間爲空、導致後面讀取不到
if (row > 1) {
//console.log(oSheet.Cells(row, col).value);
jsondata[row - 2] += '"' + oSheet.Cells(1, col).value + '":' + '"' + oSheet.Cells(row, col).value + '",';
}
}
if (row > 1) {
jsondata[row - 2] = JSON.parse(('{' + jsondata[row - 2].substr(0, jsondata[row - 2].lastIndexOf(',')) + '}').replace('undefined', ''));
}
}
oWB.close();
oXL.Application.Quit();
return jsondata;
}
/**********************************************json兼容IE8*****************************************************/
//json不兼容的解決辦法：
if (!window.JSON) {
window.JSON = {
parse: function (jsonStr) {
return eval('(' + jsonStr + ')');
},
stringify: function (jsonObj) {
var result = '',
curVal;
if (jsonObj === null) {
return String(jsonObj);
}
switch (typeof jsonObj) {
case 'number':
case 'boolean':
return String(jsonObj);
case 'string':
return '"' + jsonObj + '"';
case 'undefined':
case 'function':
return undefined;
}
switch (Object.prototype.toString.call(jsonObj)) {
case '[object Array]':
result += '[';
for (var i = 0, len = jsonObj.length; i < len; i++) {
curVal = JSON.stringify(jsonObj[i]);
result += (curVal === undefined ? null : curVal) + ",";
}
if (result !== '[') {
result = result.slice(0, -1);
}
result += ']';
return result;
case '[object Date]':
return '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"';
case '[object RegExp]':
return "{}";
case '[object Object]':
result += '{';
for (i in jsonObj) {
if (jsonObj.hasOwnProperty(i)) {
curVal = JSON.stringify(jsonObj[i]);
if (curVal !== undefined) {
result += '"' + i + '":' + curVal + ',';
}
}
}
if (result !== '{') {
result = result.slice(0, -1);
}
result += '}';
return result;
case '[object String]':
return '"' + jsonObj.toString() + '"';
case '[object Number]':
case '[object Boolean]':
return jsonObj.toString();
}
}
};
}
/**********************************************json兼容IE8*******************************************************/
</script>
</head>
<body>
<input type="file" id="excel-file" οnchange="Export()" style="display:none" />
<input type="button" value="上傳excel" id="tbn" οnclick="uploads()"/>
<table id="tab" border="1"></table>
</body>
</html>
