js使用xlsx讀取excel文件的詳細步驟

更新時間：2022年09月05日 14:39:46 作者：茯神_fushen

讀取excel文件是日常開發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于js使用xlsx讀取excel文件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

下載安裝插件

npm install xlsx
or
yarn add xlsx

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

文件基礎(chǔ)

獲取文件對象

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

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

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

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

mousedown
focus
mouseup
click
blur
focus
change

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

所以監(jiān)聽input的文件內(nèi)容變更事件的話，我推薦用change事件去監(jiān)聽。

添加事件監(jiān)聽：

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

其中，打印fileList信息，可以發(fā)現(xiàn)fileList是一個類數(shù)組，由傳入的file對象組成。每個file對象包含一下屬性：

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

讀取文件數(shù)據(jù)

首先創(chuàng)建一個FileReader實例：

let reader = new FileReader();

FileReader提供了如下方法：

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

FileReader事件：

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

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

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

讀取Excel

通過xlsx獲取workbook

讀取excel主要是通過以下語句實現(xiàn)：

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

返回一個叫WordBook的對象。

其中，這里type的類型要與處理文件時讀的data一致，F(xiàn)ileReader方法對應的type取值如下：

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

所以，全部代碼如下：

let wb;  // 讀取完成的數(shù)據(jù)
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'});//手動轉(zhuǎn)化
      } 
      else {
       wb = XLSX.read(data, {type: 'binary'});
      }
      //wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字
      //wb.Sheets[Sheet名]獲取第一個Sheet的數(shù)據(jù)
    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) { //文件流轉(zhuǎn)BinaryString
  var 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的具體內(nèi)容

Sheet Object

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

sheet['!ref']	表示所有單元格的范圍，例如A1到F8則記錄為A1: F8
sheet[!merges]	存放單元格合并信息，是一個數(shù)組。每個數(shù)組由包含s和e構(gòu)成的對象組成。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	內(nèi)容類型	s	String
		n	Number
		b	Boolean
		d	Date
v	原始值
f	公式	如：B2 + B3
h	HTML內(nèi)容
w	格式化后的內(nèi)容
r	富文本內(nèi)容
......

讀取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);
    }
   });
}

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

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

導出Excel

生成sheet

aoa_to_sheet	將一個二維數(shù)組轉(zhuǎn)成sheet
json_to_sheet	將由對象組成的數(shù)組轉(zhuǎn)化成sheet
table_to_sheet	將table的dom直接轉(zhuǎn)成sheet
sheet_add_aoa	將二維數(shù)組添加到現(xiàn)有工作表中
sheet_add_json	將js對象數(shù)組添加到現(xiàn)有工作表中