在日常开发中，导出Excel是一个常见的需求。无论是导出报表、数据统计，还是生成复杂的表格，Excel导出功能都是不可或缺的。今天，我将带你手把手实现一个支持水印、自定义样式、合并单元格的Excel导出功能，并且代码简洁易用，直接集成到你的项目中！
1. 为什么需要Excel导出功能？
在Web应用中，用户常常需要将数据导出为Excel文件，以便进行进一步的分析或存档。虽然前端导出Excel的功能并不复杂，但如何实现一个功能强大、灵活易用的导出工具，却是一个值得深入探讨的话题。
本文将介绍如何使用 ExcelJS 库来实现一个功能丰富的Excel导出工具，支持以下特性：
-
自定义表格样式：设置单元格的背景颜色、字体大小、加粗等。
-
合并单元格：支持跨行、跨列的单元格合并。
-
水印功能：为导出的Excel文件添加水印，防止数据被滥用。
-
自动下载：生成Excel文件后，自动触发下载。
2. 准备工作
在开始之前，我们需要安装 ExcelJS 库。ExcelJS 是一个强大的JavaScript库，用于创建和操作Excel文件。你可以通过以下命令安装它：
npm install exceljs
此外，我们还需要一个用于生成水印的工具函数。本文将使用 Canvas 来生成水印图片，并将其嵌入到Excel文件中。
3. 实现Excel导出功能
3.1 创建Excel文件
首先，我们创建一个Excel工作簿，并添加一个工作表：
javascript
复制
javascript
import './excel.js'
export async function exportExcel(data, fileName = 'excel.xlsx') {
const workbook = new ExcelJS.Workbook() // 创建工作簿
const worksheet = workbook.addWorksheet('Sheet1') // 添加工作表
}3.2 添加水印
为了给Excel文件添加水印，我们可以使用Canvas生成一个带有水印的图片，并将其作为背景图片插入到工作表中：
javascript
复制
php
const watermarkImage = await generateWatermarkImage(['测试水印', '123456'])
const imageId = workbook.addImage({
buffer: watermarkImage,
extension: 'png'
})
worksheet.addBackgroundImage(imageId)generateWatermarkImage 函数使用Canvas生成水印图片，并将其转换为Blob或Base64格式。你可以根据需要调整水印的内容、颜色、透明度等。
3.3 填充数据并设置样式
接下来，我们遍历传入的数据，并将数据填充到工作表中。同时，我们可以为每个单元格设置样式、合并单元格、调整列宽和行高等：
javascript
复制
scss
data.forEach((rowData, rowIndex) => {
rowData.forEach((cellData, colIndex) => {
const { value, colSpan = 1, rowSpan = 1, offset = { row: 0, col: 0 }, push = { rows: 0, cols: 0 }, width, height, bgColor, bold, size } = cellData
// 计算实际的行列位置
const rowPosition = rowIndex + 1 + offset.row + push.rows
const colPosition = colIndex + 1 + offset.col + push.cols
// 设置单元格的值
const cell = worksheet.getCell(rowPosition, colPosition)
cell.value = value
// 设置单元格的合并属性
if (colSpan > 1 || rowSpan > 1) {
worksheet.mergeCells(
rowPosition,
colPosition,
rowPosition + rowSpan - 1,
colPosition + colSpan - 1
)
}
// 设置单元格对齐方式（默认居中）
cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true }
// 设置单元格的背景颜色
if (bgColor) {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: bgColor } // 颜色是ARGB格式，例：'FF0000' (红色)
}
}
cell.font = {
bold: !!bold,
size: size || 12
}
// 设置单元格的宽度
if (width) {
worksheet.getColumn(colPosition).width = width
}
// 设置单元格的高度
if (height) {
worksheet.getRow(rowPosition).height = height
}
cell.border = {
top: { style: 'thin', color: { argb: '000000' }},
left: { style: 'thin', color: { argb: '000000' }},
bottom: { style: 'thin', color: { argb: '000000' }},
right: { style: 'thin', color: { argb: '000000' }}
}
})
})3.4 保存并下载Excel文件
最后，我们将生成的Excel文件保存为Blob对象，并触发下载：
javascript
复制
arduino
const buffer = await workbook.xlsx.writeBuffer()
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
// 使用 FileSaver.js 保存文件
saveAs(blob, fileName)saveAs 函数通过创建一个隐藏的 <a> 标签，并模拟点击来实现文件的下载。
4. 使用教程
4.1 安装依赖
首先，确保你已经安装了 exceljs：
bash
复制
npm install exceljs4.2 引入代码
将本文提供的代码复制到你的项目中，并确保你已经引入了 excel.js 文件。
4.3 调用导出函数
在你的业务代码中，调用 exportExcel 函数即可导出Excel文件。你可以传入一个二维数组作为数据源，并自定义文件名：
javascript
复制
kotlin
const data = [
[
{ value: '姓名', bgColor: 'FF0000', bold: true },
{ value: '年龄', colSpan: 2 }
],
[
{ value: '张三', rowSpan: 2 },
{ value: '25' },
{ value: '男' }
],
[
{ value: '李四' },
{ value: '30' },
{ value: '女' }
]
]
exportExcel(data, '员工信息.xlsx')4.4 自定义水印
你可以通过修改 generateWatermarkImage 函数来生成不同的水印效果。例如，调整水印的文字、颜色、透明度等：
javascript
复制
csharp
const watermarkImage = await generateWatermarkImage(['测试水印', '123456'], 'blob')5. 总结
通过本文的介绍，你已经掌握了如何使用 ExcelJS 实现一个功能强大的Excel导出工具。无论是简单的表格导出，还是复杂的样式定制、水印添加，都可以轻松实现。
希望这篇文章能帮助你更好地理解和应用Excel导出功能。如果你有任何问题或建议，欢迎在评论区留言讨论！
掘金小贴士：如果你觉得这篇文章对你有帮助，别忘了点赞、收藏和分享哦！更多前端开发技巧，欢迎关注我的掘金专栏！🚀