1.js-xlsx 介紹

由SheetJS出品的js-xlsx是一款非常方便的只需要純JS即可讀取和導出excel的工具庫，功能強大，支持格式眾多，支持xls、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式。本文全部都是以xlsx格式為例。

本文同步首發于我的個人博客和博客園。

1.1.?兼容性

兼容性如下圖：

1.2.?如何使用

dist目錄下有很多個JS文件，一般情況下用xlsx.core.min.js就夠了，xlsx.full.min.js則是包含了所有功能模塊。

直接script標簽引入即可：

讀取excel

讀取excel主要是通過XLSX.read(data, {type: type});方法來實現，返回一個叫WorkBook的對象，type主要取值如下：

base64: 以base64方式讀取；

binary: BinaryString格式(byte n is data.charCodeAt(n))

string: UTF8編碼的字符串；

buffer: nodejs Buffer；

array: Uint8Array，8位無符號數組；

file: 文件的路徑(僅nodejs下支持)；

2.1.?獲取workbook對象

2.1.1.?讀取本地文件

直接上代碼：

// 讀取本地excel文件functionreadWorkbookFromLocalFile(file, callback){varreader =newFileReader();? ? reader.onload =function(e){vardata = e.target.result;varworkbook = XLSX.read(data, {type:'binary'});if(callback) callback(workbook);? ? };? ? reader.readAsBinaryString(file);}

2.1.2.?讀取網絡文件

// 從網絡上讀取某個excel文件，url必須同域，否則報錯functionreadWorkbookFromRemoteFile(url, callback){varxhr =newXMLHttpRequest();? ? xhr.open('get', url,true);? ? xhr.responseType ='arraybuffer';? ? xhr.onload =function(e){if(xhr.status ==200) {vardata =newUint8Array(xhr.response)varworkbook = XLSX.read(data, {type:'array'});if(callback) callback(workbook);? ? ? ? }? ? };? ? xhr.send();}

2.2.?詳解 workbook

2.2.1.?Workbook Object

workbook里面有什么東西呢，我們打印出來看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets則保存了每個sheet的具體內容(我們稱之為Sheet Object)。每一個sheet是通過類似A1這樣的鍵值保存每個單元格的內容，我們稱之為單元格對象(Cell Object)：

2.2.2.?Sheet Object

每一個Sheet Object表示一張表格，只要不是!開頭的都表示普通cell，否則，表示一些特殊含義，具體如下：

sheet['!ref']：表示所有單元格的范圍，例如從A1到F8則記錄為A1:F8；

sheet[!merges]：存放一些單元格合并信息，是一個數組，每個數組由包含s和e構成的對象組成，s表示開始，e表示結束，r表示行，c表示列；

等等；

關于單元格合并，看懂下面這張圖基本上就沒問題了：

結果如下：

2.2.3.?單元格對象

每一個單元格是一個對象(Cell Object)，主要有t、v、r、h、w等字段(詳見這里)：

t：表示內容類型，s表示string類型，n表示number類型，b表示boolean類型，d表示date類型，等等

v：表示原始值；

f：表示公式，如B2+B3；

h：HTML內容

w：格式化后的內容

r：富文本內容rich text

等等

2.2.4.?讀取workbook

普通方法：

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

根據!ref確定excel的范圍，再根據!merges確定單元格合并(如果有)，最后輸出整個table，比較麻煩，幸運的是，插件自身已經寫好工具類XLSX.utils給我們直接使用，無需我們自己遍歷，工具類輸出主要包括如下：

有些不常用，常用的主要是：

XLSX.utils.sheet_to_csv：生成CSV格式

XLSX.utils.sheet_to_txt：生成純文本格式

XLSX.utils.sheet_to_html：生成HTML格式

XLSX.utils.sheet_to_json：輸出JSON格式

常用的主要是sheet_to_csv或者sheet_to_html，轉csv的話會忽略格式、單元格合并等信息，所以復雜表格可能不適用。轉html的話會保留單元格合并，但是生成的是代碼，而不是

，需要對表格進行一些定制時不太方便，所以具體還是要視情況來采用合適的工具類。

這里寫一個采用轉csv方式輸出結果的簡單示例，可點擊這里查看在線DEMO：

functionreadWorkbook(workbook){varsheetNames = workbook.SheetNames;// 工作表名稱集合varworksheet = workbook.Sheets[sheetNames[0]];// 這里我們只讀取第一張sheetvarcsv = XLSX.utils.sheet_to_csv(worksheet);document.getElementById('result').innerHTML = csv2table(csv);}// 將csv轉換成簡單的表格，會忽略單元格合并，在第一行和第一列追加類似excel的索引functioncsv2table(csv){varhtml ='

導出excel

導出分為2種，一種是基于現有excel修改，一種是全新生成，前者比較簡單，我們這里著重講后者。

3.1.?自己手寫代碼生成

導出excel文件，主要是如何生成一個sheet，我們這里寫一個最簡單的csv轉excel示例：

// csv轉sheet對象functioncsv2sheet(csv){varsheet = {};// 將要生成的sheetcsv = csv.split('\n');? ? csv.forEach(function(row, i){? ? ? ? row = row.split(',');if(i ==0) sheet['!ref'] ='A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1);? ? ? ? row.forEach(function(col, j){? ? ? ? ? ? sheet[String.fromCharCode(65+j)+(i+1)] = {v: col};? ? ? ? });? ? });returnsheet;}// 將一個sheet轉成最終的excel文件的blob對象，然后利用URL.createObjectURL下載functionsheet2blob(sheet, sheetName){? ? sheetName = sheetName ||'sheet1';varworkbook = {SheetNames: [sheetName],Sheets: {}? ? };? ? workbook.Sheets[sheetName] = sheet;// 生成excel的配置項varwopts = {bookType:'xlsx',// 要生成的文件類型bookSST:false,// 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性type:'binary'};varwbout = XLSX.write(workbook, wopts);varblob =newBlob([s2ab(wbout)], {type:"application/octet-stream"});// 字符串轉ArrayBufferfunctions2ab(s){varbuf =newArrayBuffer(s.length);varview =newUint8Array(buf);for(vari=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) &0xFF;returnbuf;? ? }returnblob;}

拿到上面的blob對象就可以直接下載了，參考我之前在JS彈出下載對話框里面封裝好的openDownloadDialog方法：

/**

* 通用的打開下載對話框方法，沒有測試過具體兼容性

* @param url 下載地址，也可以是一個blob對象，必選

* @param saveName 保存文件名，可選

*/functionopenDownloadDialog(url, saveName){if(typeofurl =='object'&& urlinstanceofBlob)? ? {? ? ? ? url = URL.createObjectURL(url);// 創建blob地址}varaLink =document.createElement('a');? ? aLink.href = url;? ? aLink.download = saveName ||'';// HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效varevent;if(window.MouseEvent) event =newMouseEvent('click');else{? ? ? ? event =document.createEvent('MouseEvents');? ? ? ? event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);? ? }? ? aLink.dispatchEvent(event);}

所以，最終下載實現如下：

// 傳入csv，執行后就會彈出下載框functionexportExcel(csv){varsheet = csv2sheet(csv);varblob = sheet2blob(sheet);? ? openDownloadDialog(blob,'導出.xlsx')；}

3.2.?利用官方工具類生成

其實上面這些代碼都不需要我們手寫，官方已經提供好了現成的工具類給我們使用，主要包括：

aoa_to_sheet: 這個工具類最強大也最實用了，將一個二維數組轉成sheet，會自動處理number、string、boolean、date等類型數據；

table_to_sheet: 將一個table dom直接轉成sheet，會自動識別colspan和rowspan并將其轉成對應的單元格合并；

json_to_sheet: 將一個由對象組成的數組轉成sheet；

aoa_to_sheet示例：

varaoa = [? ? ['姓名','性別','年齡','注冊時間'],? ? ['張三','男',18,newDate()],? ? ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);openDownloadDialog(sheet2blob(sheet),'導出.xlsx');

table_to_sheet就更簡單了，直接XLSX.utils.table_to_sheet($('table')[0])即可；

3.3.?處理單元格合并

一般來說，前端生成excel而不是csv最主要目的都是為了解決csv不能實現單元格合并的問題，要不然直接導出csv文件就好了，何必引入幾百kb的插件。

假設我們要生成如下格式的excel文件，其中A1-C1進行單元格合并：

代碼如下：

varaoa = [? ? ['主要信息',null,null,'其它信息'],// 特別注意合并的地方后面預留2個null['姓名','性別','年齡','注冊時間'],? ? ['張三','男',18,newDate()],? ? ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);sheet['!merges'] = [// 設置A1-C1的單元格合并{s: {r:0,c:0},e: {r:0,c:2}}];openDownloadDialog(sheet2blob(sheet),'單元格合并示例.xlsx');

需要注意的地方就是被合并的單元格要用null預留出位置，否則后面的內容(本例中是第四列其它信息)會被覆蓋。

3.4.?自定義樣式

普通版本不支持定義字體、顏色、背景色等，有這個功能需要的可以使用pro版，好像是要收費的，因為官網沒看到下載地址。

總結

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

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