前端使用xlsx庫導出帶有樣式的excel文件
更新時間：2022年08月05日 16:33:44 作者：callMe小王
這篇文章主要為大家介紹了前端使用xlsx庫導出帶有樣式的excel文件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
需求分析
最近遇到一個需求：前端導出excel文件，其中有部分數(shù)據(jù)用戶不能操作，部分列數(shù)據(jù)可以篩選，并且存在前一列的數(shù)據(jù)值會影響后一列數(shù)據(jù)值的輸入范圍的情況。
需要導出的前端表格如上圖所示，其中：
- Group、Type、Region可篩選
- 紅色框內(nèi)的數(shù)據(jù)用戶不可操作，綠色框內(nèi)用戶可以操作
- 當Type的值為BOOL時，Region的有效輸入為：["Holding Register","Input Register"],否則為：["Coil","Discrete Input"]
- Address的輸入范圍為：[0,65535]
項目使用的是React + AntD
常用的庫
在這個需求出來之前，前端導入導出excel文件時我使用的是xlsx這個庫。但是，如果想要修改excel表格樣式的話，是需要使用收費的專業(yè)版本。帶著開源第一，絕不花錢的基本原則，本人就找到了ExcleJS這個庫。
ExcleJS
ExcleJS不僅完全開源，還配備著中文文檔這可真的是用著放心也開心！
具體實現(xiàn)
安裝：
npm install exceljs npm install file-saver
創(chuàng)建workbook，添加名為Demo的sheet，設置默認行高為20，設置列（表頭）；
添加行信息（allData前端頁面表格中的數(shù)據(jù)）；
最后給表頭添加顏色。
// 創(chuàng)建工作簿
const workbook = new ExcelJs.Workbook();
// 添加sheet
const worksheet = workbook.addWorksheet('Demo');
// 設置 sheet 的默認行高
worksheet.properties.defaultRowHeight = 20;
// 設置列
worksheet.columns = [
{ header: 'Index', key: 'index', width: 10 },
{ header: 'Name', key: 'name', width: 25 },
{ header: 'Type', key: 'group', width: 25, outlineLevel: 1 },
{ header: 'Group', key: 'type', width: 25, outlineLevel: 1 },
{ header: 'Region', key: 'modbusRegion', width: 25, outlineLevel: 1 },
{ header: 'Address', key: 'modbusAddress', width: 25, outlineLevel: 1 },
];
// 添加行
worksheet.addRows(allData);
// 給表頭添加背景色
let headerRow = worksheet.getRow(1);
headerRow.eachCell((cell) => {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: 'dde0e7'},
}
})
- 將自動篩選器設置為從 A2 到 F1 （Group、Type、Region）
// 將自動篩選器設置為從 A2 到 F1
worksheet.autoFilter = {
from: 'C1',
to: 'E1',
}
- 鎖定整個excel表格，可篩選但不能選中鎖定的單元格
// 鎖定工資表
await worksheet.protect('the-password',
{
autoFilter:true,
selectLockedCells:false,
});
- 通過循環(huán)判斷，哪些單元格可以被用戶操作，并且判斷該單元格的輸入限制是什么
const allData = [...this.state.dataSource]
let length = allData.length
for(let i = 0 ;i < length; i++){
// Region的輸入范圍
let coilArr = ['"Coil,Discrete Input"']
let registerArr = ['"Holding Register,Input Register"']
let listArr = []
if(allData[i].type === 'BOOL'){
listArr = coilArr
}
else{
listArr = registerArr
}
// 可編輯的單元格在E、F中
worksheet.getCell(`E${i+2}`).protection = {
locked: false,
};
// Region的輸入校驗
worksheet.getCell(`E${i+2}`).dataValidation = {
type: 'list',
allowBlank: true,
formulae: listArr,
showErrorMessage: true,
errorTitle: '非法輸入',
error: '取值范圍為:'+listArr
};
worksheet.getCell(`F${i+2}`).protection = {
locked: false,
};
// Address的輸入校驗
worksheet.getCell(`F${i+2}`).dataValidation = {
type: 'whole',
operator: 'between',
allowBlank: true,
showErrorMessage: true,
formulae: [0,65535],
errorTitle: '非法輸入',
error: '取值范圍為:[0,65535]'
};
}
以上的代碼中，worksheet.getCell(E${i+2}).dataValidation是進行單元格數(shù)據(jù)驗證的函數(shù)，具體的使用可參考官方文檔。
- 導出名為"xlsx-demo.xlsx"的excel文件
// 導出excel
this.saveWorkbook(workbook, 'xlsx-demo.xlsx');
結(jié)果展示
- Group、Type、Region可篩選（?）
- 紅色框內(nèi)的數(shù)據(jù)，用戶不可操作，藍色框內(nèi)用戶可以操作（?）
- 當Type的值為BOOL時，Region的有效輸入為：["Holding Register","Input Register"],否則為：["Coil","Discrete Input"]（?）
用戶輸入錯誤給出錯誤提醒，并且不保存錯誤數(shù)據(jù)。
- Address的輸入范圍為：[0,65535]（?）
用戶輸入錯誤給出錯誤提醒，并且不保存錯誤數(shù)據(jù)。
整個函數(shù)展示
// 導出xls
exportXLS = async () =>{
const allData = [...this.state.dataSource]
let length = allData.length
// 創(chuàng)建工作簿
const workbook = new ExcelJs.Workbook();
// 添加sheet
const worksheet = workbook.addWorksheet('demo');
// 設置 sheet 的默認行高
worksheet.properties.defaultRowHeight = 20;
// 設置列
worksheet.columns = [
{ header: 'Index', key: 'index', width: 10 },
{ header: 'Name', key: 'name', width: 25 },
{ header: 'Group', key: 'group', width: 25, outlineLevel: 1 },
{ header: 'Type', key: 'type', width: 25, outlineLevel: 1 },
{ header: 'Region', key: 'modbusRegion', width: 25, outlineLevel: 1 },
{ header: 'Address', key: 'modbusAddress', width: 25, outlineLevel: 1 },
];
// 添加行
worksheet.addRows(allData);
// 給表頭添加背景色
let headerRow = worksheet.getRow(1);
// 通過 cell 設置背景色，更精準
headerRow.eachCell((cell) => {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: 'dde0e7'},
}
})
// 將自動篩選器設置為從 C1 到 F1
worksheet.autoFilter = {
from: 'C1',
to: 'E1',
}
// 鎖定工資表
await worksheet.protect('the-password',
{
autoFilter:true,
selectLockedCells:false,
});
// 判斷哪些單元格可以被用戶操作，并且判斷該單元格的輸入限制是什么
for(let i = 0 ;i < length; i++){
// 根據(jù)不同類型選擇篩選的框
let coilArr = ['"Coil,Discrete Input"']
let registerArr = ['"Holding Register,Input Register"']
let listArr = []
if(allData[i].type === 'BOOL'){
listArr = coilArr
}
else{
listArr = registerArr
}
// 可編輯的單元格在E、F中
worksheet.getCell(`E${i+2}`).protection = {
locked: false,
};
worksheet.getCell(`E${i+2}`).dataValidation = {
type: 'list',
allowBlank: true,
formulae: listArr,
showErrorMessage: true,
errorTitle: '非法輸入',
error: '取值范圍為:'+listArr
};
worksheet.getCell(`F${i+2}`).protection = {
locked: false,
};
worksheet.getCell(`F${i+2}`).dataValidation = {
type: 'whole',
operator: 'between',
allowBlank: true,
showErrorMessage: true,
formulae: [0,65535],
errorTitle: '非法輸入',
error: '取值范圍為:[0,65535]'
};
}
// 導出excel
this.saveWorkbook(workbook, 'xlsx-demo.xlsx');
}
最后
ExcelJS 功能很強大，如合并單元格、合并行和列、修改單元格的樣式、設置頁眉頁腳、操作視圖、添加公式、使用富文本等功能都是可以實現(xiàn)的。
官方文檔十分詳細，大家有需求的話直接看官方文檔。
以上就是前端使用xlsx庫導出帶有樣式的excel文件的詳細內(nèi)容，更多關于前端xlsx庫導出excel的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了微信小程序 地圖map實例詳解的相關資料,需要的朋友可以參考下2017-06-06
微信小程序 免費SSL證書https、TLS版本問題的解決辦法
這篇文章主要介紹了微信小程序 免費SSL證書https、TLS版本問題的解決辦法的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 canvas API詳解及實例代碼的相關資料,需要的朋友可以參考下2016-10-10
在計算機安全中,沙箱（Sandbox）是一種用于隔離正在運行程序的安全機制,通常用于執(zhí)行未經(jīng)測試或不受信任的程序或代碼,它會 為待執(zhí)行的程序創(chuàng)建一個獨立的執(zhí)行環(huán)境,內(nèi)部程序的執(zhí)行不會影響到外部程序的運行,下文我們來介紹一個“瀏覽器世界”的沙箱2021-10-10
Javascript中除了基本數(shù)據(jù)（Undefined、Null、Boolean、Number、String），其他都是對象（Object）2012-11-11
這篇文章主要為大家介紹了JavaScript本地存儲的全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了前端取消請求及取消重復請求方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 新建登錄頁并實現(xiàn)tabBar隱藏的相關資料,需要的朋友可以參考下2017-06-06
JS前端canvas交互實現(xiàn)拖拽旋轉(zhuǎn)及縮放示例
這篇文章主要為大家介紹了JS前端canvas交互實現(xiàn)拖拽旋轉(zhuǎn)及縮放示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
JS控制表格隔行變色...2006-06-06