利用 js-xlsx 實現選擇 Excel 文件在頁面顯示

如何將選擇的文件轉爲json數據

1.將 xlsx.full.min.js 導入到頁面中；

2.而後經過 FileReader 對象讀取文件利用 js-xlsx 轉成 json 數據

將獲得的json數據渲染到頁面上

1.因爲選擇的Excel文件屬於表格，渲染時選用 table tr td 等標籤；

2.獲取表頭數據，獲得表格列數和列名；

3.經過 for 循環建立 tr 和 td，並給 td 標籤添加上列名；

4.對數據對象進行遍歷，經過數據對象的鍵名和 td 標籤的列名給對應的 td 添加內容；

5.爲了使空白的表格能夠編輯，在建立 td 時經過 $.html 的方法添加 input 標籤，在給 td 添加內容時一樣使用 $.html 進行，把不須要 input 標籤的 td 的 html內容重寫。

代碼示例以下：

<! DOCTYPE html >

< html >

< head >

< meta charset = "UTF-8" >

< title ></ title >

< script type = "text/javascript" src = "xlsx.full.min.js" >

< / script >

< script type = "text/javascript" src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" > < / script >

< style >

table {

border-collapse : collapse ;

border : black 1px solid ;

}

th {

text-align : center ;

padding : 20px 0 ;

}

td {

padding : 5px 10px ;

border : black 1px solid ;

}

input {

border : none ;

                /* 瀏覽器自帶的 input 標籤樣式並很差看 將 input 標籤的邊框去掉 */

}

< / style >

</ head >

< body >

< input type = "file" onchange = "importf(this)" />

< table id = "demo" >

</ table >

< script >

/*

FileReader共有4種讀取方法：

1.readAsArrayBuffer(file)：將文件讀取爲ArrayBuffer。

2.readAsBinaryString(file)：將文件讀取爲二進制字符串

3.readAsDataURL(file)：將文件讀取爲Data URL

4.readAsText(file, [encoding])：將文件讀取爲文本，encoding缺省值爲'UTF-8'

*/

var wb ; //讀取完成的數據

var rABS = false ; //是否將文件讀取爲二進制字符串

function importf ( obj ) { //導入

if (! obj . files ) {

return ;

}

var f = obj . files [ 0 ];

var reader = new FileReader ();

reader . onload = function ( e ) {

// console.log(e.target.result);

if ( rABS ) {

wb = XLSX . read ( btoa ( fixdata ( e . target . result )), { //手動轉化

type: 'base64'

});

} else {

wb = XLSX . read ( e . target . result , {

type: 'binary'

});

}

//wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字

//wb.Sheets[Sheet名]獲取第一個Sheet的數據

var data = XLSX . utils . sheet_to_json ( wb . Sheets [ wb . SheetNames [ 0 ]]);

console . log ( data );

var keyAry = [];

// 遍歷json對象，獲取每一列的鍵名

for ( var key in data [ 1 ]){

keyAry . push ( key );

}

// 清除上次渲染的表格

$ ( "#demo" ). empty ();

// 設置表格頭

$ ( `<thead><tr><th colspan= ${ keyAry . length } > ${ keyAry [ 0 ] } </th></tr></thead>` ). appendTo ( $ ( "#demo" ));

for ( var d of data ){

// 經過循環,每有一條數據添加一行表格

var tr = $ ( "<tr></tr>" );

for ( var n = 0 ; n < keyAry . length ; n ++){

// 根據keyAry數組的長度,建立每一行表格中的td

$ ( "<td></td>" ). html ( "<input>" ). addClass ( keyAry [ n ]). appendTo ( tr );

}

// 遍歷對象,根據鍵名找到是哪一列的數據,給對應的td添加內容

for ( k in d ){

// (tr[0].children[keyAry.indexOf(k)])

$ ( tr [ 0 ]. children [ keyAry . indexOf ( k )]). html ( d [ k ]);

}

tr . appendTo ( $ ( "#demo" ));

}

}

if ( rABS ) {

reader . readAsArrayBuffer ( f );

} else {

reader . readAsBinaryString ( f );

}

}

function fixdata ( data ) { //文件流轉BinaryStrings

var o = "" ,

l = 0 ,

w = 10240 ;

jsArry =[];

for (; l < data . byteLength / w ; ++ l ) jsArry . push ( String . fromCharCode . apply ( null , new Uint8Array ( data . slice ( l * w , l * w + w ))));

return jsArry ;

}

< / script >

</ body >

</ html >