javascript
如何使用JavaScript实现纯前端读取和导出excel文件（转）
轉自小茗同學博客：https://www.cnblogs.com/liuxianan/p/js-excel.html
js-xlsx 介紹
由SheetJS出品的js-xlsx是一款非常方便的只需要純JS即可讀取和導出excel的工具庫，功能強大，支持格式眾多，支持xls、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式。本文全部都是以xlsx格式為例。
- 官方github：https://github.com/SheetJS/js-xlsx
- 本文配套demo在線演示地址：http://demo.haoji.me/2017/02/08-js-xlsx/
- 本文同步首發于我的個人博客和博客園。
1.1.?兼容性
兼容性如下圖：
1.2.?如何使用
dist目錄下有很多個JS文件，一般情況下用xlsx.core.min.js就夠了，xlsx.full.min.js則是包含了所有功能模塊。
直接script標簽引入即可：
<script type="text/javascript" src="./js/xlsx.core.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文件 function readWorkbookFromLocalFile(file, callback) { var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); if(callback) callback(workbook); }; reader.readAsBinaryString(file); }2.1.2.?讀取網絡文件
// 從網絡上讀取某個excel文件，url必須同域，否則報錯 function readWorkbookFromRemoteFile(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if(xhr.status == 200) { var data = new Uint8Array(xhr.response) var workbook = 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文件 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，比較麻煩，幸運的是，插件自身已經寫好工具類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的話會保留單元格合并，但是生成的是<html></html>代碼，而不是<table></table>，需要對表格進行一些定制時不太方便，所以具體還是要視情況來采用合適的工具類。
這里寫一個采用轉csv方式輸出結果的簡單示例，可點擊這里查看在線DEMO：
function readWorkbook(workbook) {var sheetNames = workbook.SheetNames; // 工作表名稱集合 var worksheet = workbook.Sheets[sheetNames[0]]; // 這里我們只讀取第一張sheet var csv = XLSX.utils.sheet_to_csv(worksheet); document.getElementById('result').innerHTML = csv2table(csv); } // 將csv轉換成簡單的表格，會忽略單元格合并，在第一行和第一列追加類似excel的索引 function csv2table(csv) { var html = '<table>'; var rows = csv.split('\n'); rows.pop(); // 最后一行沒用的 rows.forEach(function(row, idx) { var columns = row.split(','); columns.unshift(idx+1); // 添加行索引 if(idx == 0) { // 添加列索引 html += '<tr>'; for(var i=0; i<columns.length; i++) { html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>'; } html += '</tr>'; } html += '<tr>'; columns.forEach(function(column) { html += '<td>'+column+'</td>'; }); html += '</tr>'; }); html += '</table>'; return html; }導出excel
導出分為2種，一種是基于現有excel修改，一種是全新生成，前者比較簡單，我們這里著重講后者。
3.1.?自己手寫代碼生成
導出excel文件，主要是如何生成一個sheet，我們這里寫一個最簡單的csv轉excel示例：
// csv轉sheet對象 function csv2sheet(csv) { var sheet = {}; // 將要生成的sheet csv = 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}; }); }); return sheet; } // 將一個sheet轉成最終的excel文件的blob對象，然后利用URL.createObjectURL下載 function sheet2blob(sheet, sheetName) { sheetName = sheetName || 'sheet1'; var workbook = { SheetNames: [sheetName], Sheets: {} }; workbook.Sheets[sheetName] = sheet; // 生成excel的配置項 var wopts = { bookType: 'xlsx', // 要生成的文件類型 bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性 type: 'binary' }; var wbout = XLSX.write(workbook, wopts); var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"}); // 字符串轉ArrayBuffer function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } return blob; }拿到上面的blob對象就可以直接下載了，參考我之前在JS彈出下載對話框里面封裝好的openDownloadDialog方法：
/*** 通用的打開下載對話框方法，沒有測試過具體兼容性* @param url 下載地址，也可以是一個blob對象，必選* @param saveName 保存文件名，可選*/ function openDownloadDialog(url, saveName) { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 創建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效 var event; if(window.MouseEvent) event = new MouseEvent('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，執行后就會彈出下載框 function exportExcel(csv) { var sheet = csv2sheet(csv); var blob = 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示例：
var aoa = [['姓名', '性別', '年齡', '注冊時間'], ['張三', '男', 18, new Date()], ['李四', '女', 22, new Date()] ]; var sheet = 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進行單元格合并：
代碼如下：
var aoa = [['主要信息', null, null, '其它信息'], // 特別注意合并的地方后面預留2個null ['姓名', '性別', '年齡', '注冊時間'], ['張三', '男', 18, new Date()], ['李四', '女', 22, new Date()] ]; var sheet = 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版，好像是要收費的，因為官網沒看到下載地址。
轉載于:https://www.cnblogs.com/ceci/p/11380901.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的如何使用JavaScript实现纯前端读取和导出excel文件（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse出现ContextLoad
- 下一篇： Spring框架第一天知识总结