前端和 excel 的那點事

在開發需求中，經常會遇到需要和excel相關的需求，畢竟不是所有人都是程序員，很多的業務都是通過excel去進行數據的整理歸類計算的，excel中提供的一系列快捷功能，統計功能也非常的實用，但是這也就造成了除了和接口打交道，前端也需要和excel打一下交道

excel 是什么

excel是微軟出的一款電子表格軟件，wps是國內知名的免費辦公軟件，以及蘋果的Numbers同樣都支持編輯和生成excel文件

excel 的格式

這里說的不是單純的excel而是平時前端開發的時候所使用到的excel類型的文件格式，主要有

csv

csv 是一種純文本的格式，非常的簡單，每一行代表一行，沒一列通過,進行分割，我們只需要通過split函數就能直接分割成對應的二維數組結構

xsls/xls

區別在于 xls類型的文件我們可以通過存儲網頁的形式存儲下來，xsls就是一個純的二進制文件了，這一類更傾向于使用類庫進行操作

讀取

如果是csv，最簡單的情況下，就直接使用<input type="file">,只有用fileReader讀取為純文本就行了

nodejs和browser唯一的區別就在于，node還支持直接通過steam等概念進行輸入，而browser只有arrayBuffer這一種手段

在一般情況下，直接fileReader讀取excel都會是二進制流，不過根據其編碼規范是可以進行還原的，其中的對應關系比較負責

常用的庫

庫的左右就在于，他們能將excel的文件專為對應的js對象供我們操作

sheet.js

社區開源版本的xlsx.js就可以完成讀取和寫入的工作了，

以下是 sheet.js 的對應數據結構.

讀取也狠方便

XLSX.read(buffer, { type: "buffer" });

不過官方的文檔相對還是比較難以理解的，一般日常我用另外一個庫

exceljs

js-xlsx 的 思想構成也是通過將二進制流轉為js對象的方式方便我們操作，不過 api 方面設計的更加友好一點

最主要的兩點。

• 中文文檔
• demo 易懂

讀取也很容易，通過fileReader.readAsArrayBuffer 就能直接讀取，如果是在node環境下，更能直接通過steam和file接口直接獲取數據

// load from buffer var workbook = new Excel.Workbook(); workbook.xlsx.load(data).then(function() {// use workbook});

寫入

原生 js

這個只適用于 js

xls

2013 之前的xls模式是可以將一個html文件導出成一個.xls文件的所以我們首先定義一個html

<table id="tblData"><tr><th>Name</th><th>Email</th><th>Country</th></tr><tr><td>John Doe</td><td>john@gmail.com</td><td>USA</td></tr><tr><td>Michael Addison</td><td>michael@gmail.com</td><td>UK</td></tr><tr><td>Sam Farmer</td><td>sam@gmail.com</td><td>France</td></tr> </table>

接著獲取html之后導出

const tableHTML = table.outerHTML.replace(/ /g, "%20"); const url = `data:application/vnd.ms-excel,${tableHTML}`; window.open(url);

csv

還能說什么呢，拼接字符串唄

庫

sheet.js

抱歉不是很熟悉他的輸出,可以這樣使用來生成一個base64從而用 fileSaver 進行下載

XLSX.write(wb, { bookType: "xlsx", type: "base64" });

exceljs

exceljs 是我最喜歡使用的一個庫了，文檔清晰而且支持圖片，富文本等各種操作

導出

導出操作在瀏覽器端依然是生成一個ArrayBuffer廢話少說，直接上代碼

function download(workbook, name = "template") {if (!workbook) {throw new Error("workbook不能為空");}return workbook.xlsx.writeBuffer().then(buffer => new Blob([buffer], { type: "application/octet-stream" })).then(blob =>FileSaver(blob, `${name}-${new Date().toLocaleString()}.xlsx`)); }

填充數據

var worksheet = workbook.addWorksheet("sheet"); worksheet.columns = [{ header: "Id", key: "id", width: 10 },{ header: "Name", key: "name", width: 32 },{ header: "D.O.B.", key: "DOB", width: 10, outlineLevel: 1 } ];worksheet.addRows([]);

其他操作

文檔中已經很詳細了，exceljs幾乎支持了所有可能會用到的excel操作，建議熟悉文檔即可，像合并單元格，背景圖片，富文本，評論均可以支持

暫不展開了

ejs-excel

如果熟悉ejs，同時對樣式操作，可視化操作的人，可以試試這個，可惜只支持node環境，通過ejs的語法定義，將數據填充到 excel 中并且生成

插件

微軟官方文檔

excel2016 之后其實 excel 支持使用 js 進行插件的開發，之前工作中遇到過，但是當時不是很完善，等待重新讀一遍文檔再補充

參考

[SheetJS] js-xlsx 模塊學習指南

總結

以上是生活随笔為你收集整理的js导出excel单元格内换行符代码_前端和excel的那些事的全部內容，希望文章能夠幫你解決所遇到的問題。

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