一键导出Excel，还能加水印！支持单元格合并！前端导出Excel的终极指南 🚀

在日常开发中，导出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 exceljs

4.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导出功能。如果你有任何问题或建议，欢迎在评论区留言讨论！

掘金小贴士：如果你觉得这篇文章对你有帮助，别忘了点赞、收藏和分享哦！更多前端开发技巧，欢迎关注我的掘金专栏！🚀

项目地址： ext.dcloud.net.cn/plugin?id=2...