前端實現(xiàn)導(dǎo)出excel單元格合并和調(diào)整樣式

有些業(yè)務(wù)場景需要導(dǎo)出excel表格,尋常這類需求其實是服務(wù)端完成,但是前端也有可以實現(xiàn)這類需求的庫,這里我介紹最近使用過的三個庫。

通用電子表格格式(CSF)

單元地址對象存儲為{c:C, r:R},C和R是列號和行號。例如,單元格地址B5由單元地址對象表示{c:1, r:4}。

單元格范圍對象存儲為范圍{s:S, e:E},其中S表示第一個單元格,E表示最后一個單元格。例如,范圍A3:B7由單元格范圍對象表示{s:{c:0, r:2}, e:{c:1, r:6}}

單元對象的基本鍵值對

特殊工作表鍵(可通過sheet[key]進(jìn)行訪問,每個以!開頭):

  • sheet['!ref']:代表圖紙范圍。與圖紙一起使用的功能應(yīng)使用此參數(shù)來確定范圍。分配超出范圍的單元格將不被處理。當(dāng)遇到顯示不出來內(nèi)容時,請檢查范圍是否正確
  • sheet['!margins']:代表頁邊距的對象。默認(rèn)值遵循Excel的“常規(guī)”預(yù)設(shè)。Excel還具有“寬”和“窄”預(yù)設(shè),但它們存儲為原始測量值。
  • sheet['!cols']:列屬性對象的數(shù)組。列寬實際上是以規(guī)范化的方式存儲在文件中的,以“最大位數(shù)寬度”(呈示的數(shù)字0-9的最大寬度,以像素為單位)衡量。解析后,列對象將在wpx字段中存儲像素寬度,在字段中存儲字符寬度以及在wch字段中存儲最大位數(shù)MDW。
  • sheet['!rows']:行屬性對象的數(shù)組,如文檔稍后所述。每個行對象對包括行高和可見性的屬性進(jìn)行編碼。
  • sheet['!merges']:與工作表中相對應(yīng)的范圍對象數(shù)組合并單元格。純文本格式不支持合并單元格。

SheetJS

sheetJS官網(wǎng)
sheetJS--github
優(yōu)點:有很多實用方便的方法和格式轉(zhuǎn)換
缺點:調(diào)整樣式只有付費版可以修改

工具方法:
aoa_to_sheet 將JS數(shù)據(jù)數(shù)組轉(zhuǎn)換為工作表。
json_to_sheet 將JS對象數(shù)組轉(zhuǎn)換為工作表。
table_to_sheet 將DOM TABLE元素轉(zhuǎn)換為工作表。
sheet_add_aoa 將JS數(shù)據(jù)數(shù)組添加到現(xiàn)有工作表中。
sheet_add_json 將JS對象數(shù)組添加到現(xiàn)有工作表中。

sheet_to_json 將工作表對象轉(zhuǎn)換為JSON對象數(shù)組。
sheet_to_csv 生成定界符分隔值輸出。
sheet_to_txt 生成UTF16格式的文本。
sheet_to_html 生成HTML輸出。
sheet_to_formulae 生成公式列表(具有值后備)。

具體合并單元格的例子請參考 純前端利用 js-xlsx 之合并單元格(3)

xlsx-style

xlsx-style地址
此項目是原始SheetJS / xlsx項目的分支。
但是并沒有隨著SheetJS更新而更新,所以有很多現(xiàn)有的SheetJS的實用工具方法這個插件里都沒有。但是優(yōu)點是可以導(dǎo)出excel樣式并且不用付費
工具減少成了這些:

sheet_to_json 將工作簿對象轉(zhuǎn)換為JSON對象數(shù)組。
sheet_to_csv 生成定界符分隔值輸出
sheet_to_formulae 生成公式列表(具有值后備)

這個插件也是可以合并單元格的,所以如果不是很復(fù)雜的數(shù)據(jù)轉(zhuǎn)換成excel,并且又需要樣式調(diào)整的,可以選擇這個插件。
具體調(diào)整樣式例子請參考 純前端利用 js-xlsx 之單元格樣式(4)

LAY-EXCEL

這是一個改造最新 JS-XLSX 讓其支持樣式設(shè)置的插件,可以說是集合了JS-XLSX的所有優(yōu)點,也克服了缺點(樣式調(diào)整需要付費)的插件,博主原文在這里:
令最新JS-XLSX支持樣式的改造方法
文檔:
LAY-EXCEL 簡單快捷的導(dǎo)出插件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容