使用 js-xlsx/xlsx-style 实现纯前端数据导出Excel并支持自定义样式

在前端开发过程中，经常会遇到需要将数据导出到Excel表格的场景，而js-xlsx/xlsx-style是一款非常强大的前端库，它可以帮助我们实现纯前端数据导出Excel，并且还支持自定义样式。本文将介绍如何使用js-xlsx/xlsx-style实现这一功能。

安装

首先，我们需要通过npm来安装js-xlsx/xlsx-style：

npm install xlsx-style --save

基本用法

1. 导入库

在我们的前端项目中，引入xlsx-style：

import XLSX from 'xlsx-style'

2. 准备数据

准备一些需要导出的数据，例如一个包含学生信息的数组：

const students = [
  { name: '张三', age: 20, grade: 90 },
  { name: '李四', age: 21, grade: 85 },
  { name: '王五', age: 19, grade: 95 }
]

3. 创建工作簿和工作表

使用XLSX对象的utils.book_new方法创建一个工作簿对象，再使用utils.json_to_sheet方法创建一个工作表对象，并将数据填充到工作表中：

const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.json_to_sheet(students)

4. 设置样式

使用XLSX.utils.cellStyles对象来设置单元格的样式，比如设置标题行的背景色和字体样式：

const titleStyle = {
  fill: {
    bgColor: { indexed: 64 },
    fgColor: { rgb: 'FFFFFF00' }
  },
  font: {
    color: { rgb: '000000FF' },
    bold: true
  }
}

XLSX.utils.cellStyles.title = titleStyle

5. 添加样式

使用XLSX.utils.sheet_add_json方法将数据添加到工作表中，并设置样式：

XLSX.utils.sheet_add_json(worksheet, students, {
  header: ['name', 'age', 'grade'],
  skipHeader: true,
  cellStyles: { A1: 'title' }
})

6. 将工作表添加到工作簿中

将工作表对象添加到工作簿对象中：

XLSX.utils.book_append_sheet(workbook, worksheet, '学生信息')

7. 导出Excel

最后使用XLSX.write方法将工作簿对象转换为二进制数据，并保存为Excel文件：

const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })

function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF
  }
  return buf
}

const blob = new Blob([s2ab(excelData)], { type: 'application/octet-stream' })
saveAs(blob, '学生信息.xlsx')

自定义样式

可以根据自己的需求，自定义各个单元格的样式，除了可以设置背景色和字体样式之外，还可以设置边框、对齐方式等多种样式。

const cellStyle = {
  border: {
    left: { style: 'thin', color: { rgb: '00000000' } },
    right: { style: 'thin', color: { rgb: '00000000' } },
    top: { style: 'thin', color: { rgb: '00000000' } },
    bottom: { style: 'thin', color: { rgb: '00000000' } }
  },
  alignment: { horizontal: 'center', vertical: 'center' }
}

XLSX.utils.cellStyles.default = cellStyle

总结

使用js-xlsx/xlsx-style，我们可以在前端实现纯前端数据导出Excel的功能，并且还支持自定义样式。通过在工作表中添加数据和样式，最后导出Excel文件，我们可以得到一个符合需求的Excel表格。

虽然js-xlsx/xlsx-style的使用和API较为繁琐，但是它的功能非常强大，可以满足各种导出Excel的需求。在实际项目中，我们可以根据需求进行定制化开发，实现更为复杂的导出功能。

本文来自极简博客，作者：蓝色海洋，转载请注明原文链接：使用 js-xlsx/xlsx-style 实现纯前端数据导出Excel并支持自定义样式