下載安裝插件

npm install xlsx or yarn add xlsx

此時，在項目的node_modules文件夾和package.json文件中可以找到xlsx依賴。

文件基礎

獲取文件對象

我比較推薦使用h5的原生文件上傳項

<input type="file" id="uploadExcel" multiple />

其中multiple屬性允許上傳多個文件，通過Ctrl按鍵來實現。

在選擇文件的過程中，觸發事件的流程是下面這樣的：

mousedown

focus

mouseup

click

blur

focus

change

首先觸發的是鼠標按下事件，然后就是焦點到了input上面，然后鼠標抬起事件，觸發click事件，失去焦點以后彈出文件選擇框，選中文件以后觸發焦點，最后觸發change事件。

所以監聽input的文件內容變更事件的話，我推薦用change事件去監聽。

添加事件監聽：

window.document.getElementdById("uploadExcel").addEventListener("change", function(e){let fileList = e.target.files; })

其中，打印fileList信息，可以發現fileList是一個類數組，由傳入的file對象組成。每個file對象包含一下屬性：

lastModified	Number	表示最近一次的修改時間的時間戳
lastModeifiedDate	Object	表示最后一次修改時間的Date對象，可以在其中調用Date對象的有關方法。
name		文件上傳時的文件名
size		文件的字節大小
type	String	文件的MIME類型
weblitRelativePath		當在input上添加webkitdirectory屬性時，可選文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。未加時為空

讀取文件數據

首先創建一個FileReader實例：

let reader = new FileReader();

FileReader提供了如下方法：

readAsArrayBuffer(file)	將文件讀取為ArrayBuffer對象
readAsDataURL(file)	將文件讀取為DataURL，因此可以讀取圖片。
readAsText(file, encoding)	將文件讀取為文本，第二個參數是文本的編碼方式，默認為utf-8
abort()	終止文件讀取操作
注：無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲都在result屬性中。

FileReader事件：

onabort	當讀取操作被終止時調用
onerror	當讀取操作發生錯誤時調用
onload	當讀取操作成功完成時調用
onloaded	當讀取操作完成時調用，無論成功或失敗
onloadstart	當讀取操作開始時調用
onprogress	在讀取數據過程中周期性調用

我們使用readAsDataURL(file)來讀取文件數據，并使用onload事件來輸出讀取成功后result中的數據：

reader.onload = function(e){let data = e.target.result; }; reader.readAsDataURL(file);

讀取Excel

通過xlsx獲取workbook

讀取excel主要是通過以下語句實現：

XLSX.read(data, { type: type });

返回一個叫WordBook的對象。

其中，這里type的類型要與處理文件時讀的data一致，FileReader方法對應的type取值如下：

base64	以base64方法讀取
binary	BinatyString格式(byte n is data.charCodeAt (n))
string	UTF-8編碼的字符串
buffer	nodejs Buffer
array	Uint8Array，8位無符號數組
file	文件的路徑(僅nodejs下支持)

所以，全部代碼如下：

let wb; // 讀取完成的數據 let rABS = false; // 是否將文件讀取為二進制字符串 document.getElementById("excel").addEventListener("change",function (e) {if(!e.target.files) return;var f = e.target.files[0];var reader = new FileReader();reader.onload = function(e) {var data = e.target.result;if(rABS) {wb = XLSX.read(btoa(fixdata(data)), {type: 'base64'});//手動轉化} else {wb = XLSX.read(data, {type: 'binary'});}//wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字//wb.Sheets[Sheet名]獲取第一個Sheet的數據document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );};if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}});function fixdata(data) { //文件流轉BinaryStringvar 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; }

WorkBook介紹

SheetNames保存了所有Sheet的名字

Sheets保存了每個Sheet的具體內容

Sheet Object

每個sheet Object表示一張表格，通過類似A1這樣的鍵值保存每個單元格的內容。只要不是"!"開頭的都表示普通的cell。特殊cell有：

sheet['!ref']	表示所有單元格的范圍，例如A1到F8則記錄為A1: F8
sheet[!merges]	存放單元格合并信息，是一個數組。每個數組由包含s和e構成的對象組成。s表示start，e表示end，r表示row，c表示col。

例如：

sheet1:{!merge: [{e: { c: 5, r: 0 },s: { c: 0, r: 0 } // 表示A1到F1單元格合并},{e: { c: 5, r: 9 },s: { c: 0, r: 9 } // 表示A10到F10單元格合并}] }

Cell Object

t	內容類型	s	String
		n	Number
		b	Boolean
		d	Date
v	原始值
f	公式	如：B2 + B3
h	HTML內容
w	格式化后的內容
r	富文本內容
......

讀取WorkBook

普通方法：

// 讀取 excel文件 function outputWorkbook(workbook) { var sheetNames = workbook.SheetNames; // 工作表名稱集合sheetNames.forEach(name => { var worksheet = Workbook.Sheets[name]; // 只能通過工作表名稱來獲取指定工作表for(var key in worksheet) { // v是讀取單元格的原始值console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);}}); }

根據!ref確定excel的范圍，再根據!merges確定單元格合并，最后輸出整個table。插件zi'shen已經寫好工具類XLSX.utils給我們用：

sheet_to_html	轉csv會忽略格式、單元格合并等信息
sheet_to_txt
sheet_to_csv	會保留單元格合并，但是生成的是HTML代碼，不是<table>
sheet_to_json
sheet_to_formulae

導出Excel

生成sheet

aoa_to_sheet	將一個二維數組轉成sheet
json_to_sheet	將由對象組成的數組轉化成sheet
table_to_sheet	將table的dom直接轉成sheet
sheet_add_aoa	將二維數組添加到現有工作表中
sheet_add_json	將js對象數組添加到現有工作表中

• format_cell 生成單元格的文本值(使用數字格式)
• encode_row / decode_row 在0索引行和1索引行之間轉換
• encode_col / decode_col 在0索引的列和列名之間轉換
• encode_cell / decode_cell 轉換單元格地址
• encode_range / decode_range 轉換單元格范圍

總結

以上是生活随笔為你收集整理的js使用xlsx读取excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。