前言
??????js-xlsx是一款非常方便的只需要純JS即可讀取和導(dǎo)出excel的工具庫(kù)，功能強(qiáng)大，支持格式眾多，支持xls、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式。本文全部都是以xlsx格式為例。
創(chuàng)建excel流程
創(chuàng)建一個(gè)excel會(huì)經(jīng)歷以下過程：
- 創(chuàng)建一個(gè)工作薄
- 創(chuàng)建一個(gè)sheet
- 創(chuàng)建表格行列等
所以我們用js-xlsx創(chuàng)建excel同樣的道理：
- 創(chuàng)建工作?。╓orkBook）
- 創(chuàng)建sheet（WorkBook.Sheet）
- 創(chuàng)建表格行列（WorkBook.sheet[]）
快速上手
安裝：
npm i xlsx xlsx-style -S
解決運(yùn)行時(shí)插件報(bào)錯(cuò)：
xlsx-style.js報(bào)錯(cuò)Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
引入：
import * as XLSX from 'xlsx'
import * as XLSX2 from 'xlsx-style'
導(dǎo)出：
const workbook = XLSX.utils.book_new() // 創(chuàng)建工作簿
const worksheet = XLSX.utils.json_to_sheet(data) // json結(jié)構(gòu)轉(zhuǎn)sheet頁
const worksheet = XLSX.utils.table_to_sheet(data) // dom結(jié)構(gòu)轉(zhuǎn)sheet頁
const worksheet = XLSX.utils.aoa_to_sheet(data) // 數(shù)組轉(zhuǎn)sheet頁
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') // 插入sheet頁命名為sheet1
XLSX.writeFile(workbook, 'new.xlsx') // 輸入文件
指定范圍替換值/樣式
` 提示：默認(rèn)導(dǎo)出表格文字樣式是cablili，大小12，居左，字符串格式
自定義替換函數(shù)：
- range：替換范圍
- custom：樣式或者默認(rèn)值
示例：
custom = [
{
range: { start: 'A1', end: 'B2' },
cellStyles: {
border: {
top: { style: 'thin', color: { rgb: '000000' } },
left: { style: 'thin', color: { rgb: '000000' } },
bottom: { style: 'thin', color: { rgb: '000000' } },
right: { style: 'thin', color: { rgb: '000000' } }
},
font: {
name: '宋體',
sz: 11,
color: '000000',
bold: false,
underline: false,
italic: false
},
alignment: {
vertical: 'center',
horizontal: 'center',
wrapText: false
},
fill: {
bgColor: 'ffffff'
}
},
newValue: ''
}
]
實(shí)際邏輯：
custom.forEach(item => {
const range = {
s: XLSX.utils.decode_cell(item.range.start), // 將輸入的{start: 'A1'} 解析
e: XLSX.utils.decode_cell(item.range.end) // 將輸入的{end: 'F10'} 解析
}
for (let row = range.s.r; row <= range.e.r; row++) {
for (let col = range.s.c; col <= range.e.c; col++) {
const cellRef = XLSX.utils.encode_cell({ c: col, r: row })
if (item.newValue) { // 批量替換單元格的值
worksheet[cellRef] = { t: 's', v: item.newValue, z: XLSX.utils.encode_cell({ c: col, r: row }) }
break
}
if (item.cellStyles && worksheet[cellRef]) worksheet[cellRef].s = item.cellStyles // 批量替換單元格的樣式
}
}
})
由于xlsx.js不能提供樣式的插入，因此需要使用xlsx-style.js的write方法；
由源碼可得：
繼續(xù)往下看：
在write_zip_type這個(gè)方法中new了一個(gè)StyleBuilder對(duì)象；
在StyleBuilder對(duì)象內(nèi)部完成了給表格增加樣式的操作；
小結(jié)
???????以上文章提供了關(guān)于使用js-xlsx庫(kù)創(chuàng)建和導(dǎo)出Excel文件的詳細(xì)指南。文章首先介紹了js-xlsx的基本概念和用途，然后提供了代碼示例和解釋，幫助開發(fā)人員了解如何使用該庫(kù)進(jìn)行Excel文件的操作。
???????在文章中，我們學(xué)習(xí)了如何使用js-xlsx來創(chuàng)建工作簿、添加工作表以及設(shè)置單元格的值和樣式。我們還了解了如何使用自定義替換函數(shù)和樣式構(gòu)建器來實(shí)現(xiàn)批量替換值和樣式的功能。文章來源：http://www.zghlxwxcb.cn/news/detail-837939.html
???????總的來說，這篇文章是一個(gè)很好的參考資料，對(duì)于想要使用js-xlsx庫(kù)的開發(fā)人員來說尤其有用。它提供了必要的指導(dǎo)，使我們能夠輕松地處理Excel文件，并根據(jù)需要進(jìn)行自定義操作。文章來源地址http://www.zghlxwxcb.cn/news/detail-837939.html
到了這里，關(guān)于前端結(jié)合xlsx.js+xlsx-style.js源碼實(shí)現(xiàn)自定義excel文件導(dǎo)出的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
