前端使用xlsx庫導(dǎo)出帶有樣式的excel文件
更新時間：2022年08月05日 16:33:44 作者：callMe小王
這篇文章主要為大家介紹了前端使用xlsx庫導(dǎo)出帶有樣式的excel文件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
需求分析
最近遇到一個需求：前端導(dǎo)出excel文件，其中有部分?jǐn)?shù)據(jù)用戶不能操作，部分列數(shù)據(jù)可以篩選，并且存在前一列的數(shù)據(jù)值會影響后一列數(shù)據(jù)值的輸入范圍的情況。
需要導(dǎo)出的前端表格如上圖所示，其中：
- Group、Type、Region可篩選
- 紅色框內(nèi)的數(shù)據(jù)用戶不可操作，綠色框內(nèi)用戶可以操作
- 當(dāng)Type的值為BOOL時，Region的有效輸入為：["Holding Register","Input Register"],否則為：["Coil","Discrete Input"]
- Address的輸入范圍為：[0,65535]
項(xiàng)目使用的是React + AntD
常用的庫
在這個需求出來之前，前端導(dǎo)入導(dǎo)出excel文件時我使用的是xlsx這個庫。但是，如果想要修改excel表格樣式的話，是需要使用收費(fèi)的專業(yè)版本。帶著開源第一，絕不花錢的基本原則，本人就找到了ExcleJS這個庫。
ExcleJS
ExcleJS不僅完全開源，還配備著中文文檔這可真的是用著放心也開心！
具體實(shí)現(xiàn)
安裝：
npm install exceljs npm install file-saver
創(chuàng)建workbook，添加名為Demo的sheet，設(shè)置默認(rèn)行高為20，設(shè)置列（表頭）；
添加行信息（allData前端頁面表格中的數(shù)據(jù)）；
最后給表頭添加顏色。
// 創(chuàng)建工作簿
const workbook = new ExcelJs.Workbook();
// 添加sheet
const worksheet = workbook.addWorksheet('Demo');
// 設(shè)置 sheet 的默認(rèn)行高
worksheet.properties.defaultRowHeight = 20;
// 設(shè)置列
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'},
}
})
- 將自動篩選器設(shè)置為從 A2 到 F1 （Group、Type、Region）
// 將自動篩選器設(shè)置為從 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的輸入校驗(yàn)
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的輸入校驗(yàn)
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是進(jìn)行單元格數(shù)據(jù)驗(yàn)證的函數(shù)，具體的使用可參考官方文檔。
- 導(dǎo)出名為"xlsx-demo.xlsx"的excel文件
// 導(dǎo)出excel
this.saveWorkbook(workbook, 'xlsx-demo.xlsx');
結(jié)果展示
- Group、Type、Region可篩選（?）
- 紅色框內(nèi)的數(shù)據(jù)，用戶不可操作，藍(lán)色框內(nèi)用戶可以操作（?）
- 當(dāng)Type的值為BOOL時，Region的有效輸入為：["Holding Register","Input Register"],否則為：["Coil","Discrete Input"]（?）
用戶輸入錯誤給出錯誤提醒，并且不保存錯誤數(shù)據(jù)。
- Address的輸入范圍為：[0,65535]（?）
用戶輸入錯誤給出錯誤提醒，并且不保存錯誤數(shù)據(jù)。
整個函數(shù)展示
// 導(dǎo)出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');
// 設(shè)置 sheet 的默認(rèn)行高
worksheet.properties.defaultRowHeight = 20;
// 設(shè)置列
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 設(shè)置背景色，更精準(zhǔn)
headerRow.eachCell((cell) => {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: 'dde0e7'},
}
})
// 將自動篩選器設(shè)置為從 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]'
};
}
// 導(dǎo)出excel
this.saveWorkbook(workbook, 'xlsx-demo.xlsx');
}
最后
ExcelJS 功能很強(qiáng)大，如合并單元格、合并行和列、修改單元格的樣式、設(shè)置頁眉頁腳、操作視圖、添加公式、使用富文本等功能都是可以實(shí)現(xiàn)的。
官方文檔十分詳細(xì)，大家有需求的話直接看官方文檔。
以上就是前端使用xlsx庫導(dǎo)出帶有樣式的excel文件的詳細(xì)內(nèi)容，更多關(guān)于前端xlsx庫導(dǎo)出excel的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vite項(xiàng)目自動添加eslint prettier源碼解讀
這篇文章主要為大家介紹了Vite項(xiàng)目自動添加eslint prettier源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
JavaScript版代碼高亮...2006-06-06
一文詳解typeScript的extends關(guān)鍵字
這篇文章主要為大家介紹了typeScript的extends關(guān)鍵字使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 navigation API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了nuxt.js 多環(huán)境變量配置，一般在香米開發(fā)中會有三個環(huán)境開發(fā)環(huán)境也叫測試環(huán)境(test) 、RC環(huán)境也叫預(yù)發(fā)布環(huán)境(rc) 、線上環(huán)境(production) 下面來看看文章內(nèi)容的詳細(xì)介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索 中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實(shí)現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實(shí)現(xiàn),需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了深入理解函數(shù)執(zhí)行上下文 this示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了詳解無界微前端是如何渲染子應(yīng)用demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問題解決
在開發(fā)微信小程序時我們會在小程序內(nèi)加入純HTML代碼，且HTML中包括圖片，視頻，甚至是事件，微信小程序?yàn)槲覀兲峁┝?種解決方法，但它們的功能與實(shí)現(xiàn)方式與最終效果并不理想2020-01-01