快捷導(dǎo)航

js使用xlsx讀取excel文件的詳細(xì)步驟

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

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

下載安裝插件

npm install xlsx
or
yarn add xlsx

此時(shí)，在項(xiàng)目的node_modules文件夾和package.json文件中可以找到xlsx依賴。

文件基礎(chǔ)

獲取文件對(duì)象

我比較推薦使用h5的原生文件上傳項(xiàng)

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

其中multiple屬性允許上傳多個(gè)文件，通過(guò)Ctrl按鍵來(lái)實(shí)現(xiàn)。

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

mousedown
focus
mouseup
click
blur
focus
change

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

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

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

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

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

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

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

首先創(chuàng)建一個(gè)FileReader實(shí)例：

let reader = new FileReader();

FileReader提供了如下方法：

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

FileReader事件：

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

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

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

讀取Excel

通過(guò)xlsx獲取workbook

讀取excel主要是通過(guò)以下語(yǔ)句實(shí)現(xiàn)：

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

返回一個(gè)叫WordBook的對(duì)象。

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

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

所以，全部代碼如下：

let wb;  // 讀取完成的數(shù)據(jù)
let rABS = false; // 是否將文件讀取為二進(jìn)制字符串
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'});//手動(dòng)轉(zhuǎn)化
      } 
      else {
       wb = XLSX.read(data, {type: 'binary'});
      }
      //wb.SheetNames[0]是獲取Sheets中第一個(gè)Sheet的名字
      //wb.Sheets[Sheet名]獲取第一個(gè)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保存了每個(gè)Sheet的具體內(nèi)容

Sheet Object

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

sheet['!ref']	表示所有單元格的范圍，例如A1到F8則記錄為A1: F8
sheet[!merges]	存放單元格合并信息，是一個(gè)數(shù)組。每個(gè)數(shù)組由包含s和e構(gòu)成的對(duì)象組成。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]; // 只能通過(guò)工作表名稱來(lái)獲取指定工作表
    for(var key in worksheet) {            // v是讀取單元格的原始值
        console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
    }
   });
}

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

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

導(dǎo)出Excel

生成sheet

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