寫個 ExcelJS 的小筆記
ExcelJS 是 JavaScript 的一個 Library，有許多非常方便的功能，可以讓你順利產出漂漂亮亮的 Excel 的版面。
以下是官方的介紹：
Read, manipulate and write spreadsheet data and styles to XLSX and JSON.
Reverse engineered from Excel spreadsheet files as a project.
安裝
npm install exceljs
使用
import ExcelJS from 'exceljs'
const workbook = new ExcelJS.Workbook()
const worksheet = workbook.addWorksheet('My Sheet')
其實ExcelJS 官方文件都寫得相當清楚，下面就舉幾個我自己延伸用過的小範例。
文字格式設定
設定文字位置
worksheet.getCell('F55').value = 'Apple'
worksheet.getCell('F55').alignment = { vertical: 'bottom', horizontal: 'right' }
worksheet.addRow(['第一格', '', '', '第四格']).alignment = { horizontal: 'left' }
使用 richText 的方式設定粗體、顏色等。
worksheet.getCell('A17').value = {
richText: [
{
font: {
size: 9,
bold: true,
},
text: 'Apple',
},
],
}
設定數字格式
使用 numFmt 這個函數設定
worksheet.getCell('K46').value = 54106
worksheet.getCell('K46').numFmt = '"$" #,##0.00'
從瀏覽器中讀取圖片放入 Excel
搭配 axios 從瀏覽器中讀取圖片，放入 Excel 檔案的指定位置。
const imageBufferCompany = await axios.get(`/img/company.png`, {
responseType: 'arraybuffer',
})
const imageId = workbook.addImage({
buffer: imageBufferCompany.data,
extension: 'png',
})
worksheet.addImage(imageId, {
tl: { col: 9, row: 57 },
ext: { width: 174, height: 118 },
})
底色填色
寫一個共用的 function ， 之後就可以直接拿來使用。
function setCellFill(worksheet: ExcelJS.Worksheet, cellAddress: string, fillColor: string) {
worksheet.getCell(cellAddress).fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: fillColor },
}
}
const columns = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
setCellFill(worksheet, 'I47', 'fffe35')
setCellFill(worksheet, 'I48', 'fffe35')
columns.forEach((column, index) => {
if (index <= 6) setCellFill(worksheet, `${column}3`, 'b8b8b8')
})
文字租體 Bold
這滿常使用的，也是寫成一個共用的 function
function setRichText(
worksheet: any,
cellAddress: string,
text: string,
vertical = 'middle',
horizontal = 'center',
fontSize = 9,
isBold = true
) {
const cell = worksheet.getCell(cellAddress)
cell.value = {
richText: [
{
font: { size: fontSize, bold: isBold },
text: text,
},
],
}
cell.alignment = { vertical: vertical, horizontal: horizontal }
}
setRichText(worksheet, 'A47', 'Country of Origin:', 'middle', 'left')
setRichText(worksheet, 'J46', 'Sub Total', 'middle', 'right')
邊框 Borders
寫好共用的 border 設定，直接拿來使用。
export const borderAll: Partial<ExcelJS.Borders> = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
}
export const borderTopLeft: Partial<ExcelJS.Borders> = {
left: { style: 'thin' },
top: { style: 'thin' },
}
export const borderTopRight: Partial<ExcelJS.Borders> = {
right: { style: 'thin' },
top: { style: 'thin' },
}
export const borderLeftBottom: Partial<ExcelJS.Borders> = {
left: { style: 'thin' },
bottom: { style: 'thin' },
}
export const borderRightBottom: Partial<ExcelJS.Borders> = {
right: { style: 'thin' },
bottom: { style: 'thin' },
}
worksheet.getCell(`A1`).border = borderAll
worksheet.getCell(`A3`).border = borderTopLeft
worksheet.getCell(`G3`).border = borderTopRight
worksheet.getCell(`A10`).border = borderLeftBottom
worksheet.getCell(`G10`).border = borderRightBottom
如果要做邊線也可以用 for 迴圈
export const borderLeft: Partial<ExcelJS.Borders> = {
left: { style: 'thin' },
}
export const borderRight: Partial<ExcelJS.Borders> = {
right: { style: 'thin' },
}
for (let i = 3; i <= 52; i++) {
worksheet.getCell(`A${i}`).border = borderLeft
worksheet.getCell(`G${i}`).border = borderRight
}
產出 Excel 文件
最後，將做好的資料保存產出為一個文件
workbook.xlsx.writeBuffer().then((content) => {
const link = document.createElement('a')
const blobData = new Blob([content], {
type: 'application/octet-stream;charset=utf-8;',
})
link.download = `${dayjs().format('YYYYMMDDHHmmss')}.xlsx`
link.href = URL.createObjectURL(blobData)
link.click()
})
]]>
更多常用指令
兩個不同的 Branch ，好處是大家可以互相分工。
↑ 最後 obj 是 10 obj2 是 30
在蝦皮上買的，已經買了 3 支應該會再買第 4 隻，超級好用的哈哈哈
應該 2-300 就有一隻了，可以散熱筆電，高度也可以符合視線，我通常會搭配藍牙鍵盤跟滑鼠一起使用。
圖為在瀏覽器中工具列的位置
圖為清除瀏覽器歷史紀錄（清除暫存）
