Vue+xlsx+xlsx-style修改表格样式并导出

'# Vue+xlsx+xlsx-style修改表格样式并导出

一、背景与问题

在现代Web应用中，表格数据展示是常见需求。随着业务复杂度提升，用户往往需要对表格进行样式化处理，并支持导出功能。传统方案多采用file-saver配合xlsx库导出，但存在以下痛点：

样式丢失：导出的Excel文件缺少边框、背景色等样式
复杂样式支持不足：无法处理字体、对齐方式、合并单元格等高级样式
性能瓶颈：处理大量数据时内存占用过高

本文将深入解析如何通过xlsx和xlsx-style库实现表格样式化导出，并探讨其技术原理、实现方式和工程实践。

二、基本原理

1. xlsx库架构

xlsx库基于SheetJS的CoreXLSX架构，核心组件包括：

XLSX.utils.aoa_to_sheet(data)：将二维数组转换为Sheet对象
XLSX.utils.sheet_to_binary(sheet)：将Sheet对象转换为二进制数据
XLSX.writeFile(data, filename)：将二进制数据写入文件

2. xlsx-style扩展机制

xlsx-style通过扩展XLSX.utils对象，添加了样式注入功能：

XLSX.utils.aoa_to_sheet(data, { 
  // 样式注入配置
  cellStyles: true, 
  // 其他配置项
})

其核心原理是通过xlsx-style提供的XLSX.utils.sheet_to_xlsx方法，将样式信息注入到Sheet对象中。

三、环境准备

1. 项目依赖

npm install xlsx xlsx-style

2. 开发环境配置

// main.js
import Vue from 'vue'
import App from './App.vue'
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style'

Vue.prototype.$xlsx = XLSX
Vue.prototype.$xlsxStyle = XLSXStyle

new Vue({
  render: h => h(App)
}).$mount('#app')

四、核心实现

1. 基础样式导出

// 基础样式导出函数
function exportBaseExcel(data, filename) {
  const ws = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, filename)
}

2. 样式注入实现

// 样式注入函数
function applyStyles(ws, styles) {
  // 遍历样式对象
  for (const [key, value] of Object.entries(styles)) {
    const cell = XLSX.utils.encode_cell(key)
    // 合并样式属性
    Object.assign(ws[cell], value)
  }
}

3. 复杂样式处理

// 复杂样式导出函数
function exportStyledExcel(data, styles, filename) {
  const ws = XLSX.utils.aoa_to_sheet(data, { cellStyles: true })
  
  // 应用样式
  applyStyles(ws, styles)
  
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  
  // 使用xlsx-style导出
  XLSXStyle.writeFile(wb, filename)
}

五、完整案例

1. 项目结构

src/
├── components/
│   └── ExcelExport.vue
├── App.vue
└── main.js

2. ExcelExport.vue组件

<template>
  <div>
    <table ref="table">
      <thead>
        <tr>
          <th style="background-color: #f0f0f0">ID</th>
          <th style="background-color: #d0f0d0">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td :style="{ border: '1px solid #ccc' }">{{ row.id }}</td>
          <td :style="{ border: '1px solid #ccc' }">{{ row.name }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    }
  },
  methods: {
    exportExcel() {
      const table = this.$refs.table
      const rows = table.querySelectorAll('tr')
      const data = []
      
      // 生成表格数据
      rows.forEach(row => {
        const cells = row.querySelectorAll('td, th')
        data.push([...cells].map(cell => cell.textContent))
      })
      
      // 定义样式
      const styles = {
        'A1': { fill: { bgColor: { rgb: 'FFD0F0' } } },
        'B1': { fill: { bgColor: { rgb: 'C0FFD0' } } },
        'A2': { border: '1px solid #000' },
        'B2': { border: '1px solid #000' }
      }
      
      // 导出Excel
      this.$xlsxStyle.writeFile(
        this.$xlsx.utils.book_new(),
        'styled_excel.xlsx'
      )
    }
  }
}
</script>

六、源码解析

1. 样式注入机制

xlsx-style通过扩展XLSX.utils对象实现样式注入：

// xlsx-style核心代码片段
XLSX.utils.aoa_to_sheet = function (data, options) {
  // 原始实现...
  
  if (options.cellStyles) {
    // 样式注入逻辑
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data[i].length; j++) {
        const cell = XLSX.utils.encode_cell({c:j, r:i})
        if (options.styles && options.styles[cell]) {
          // 样式合并逻辑
        }
      }
    }
  }
}

2. 样式对象结构

{
  "A1": {
    "font": {
      "sz": 12,
      "color": { "rgb": "0000FF" }
    },
    "fill": {
      "bgColor": { "rgb": "FFD0F0" }
    },
    "border": {
      "top": { "style": "thin", "color": { "rgb": "000000" } }
    }
  }
}

七、进阶使用

1. 动态样式处理

function getDynamicStyles(row) {
  const styles = {}
  const cellStyle = row.style || {}
  
  if (cellStyle.backgroundColor) {
    styles[`${row.col}${row.row}`] = {
      fill: { bgColor: { rgb: cellStyle.backgroundColor } }
    }
  }
  
  return styles
}

2. 合并单元格支持

function mergeCells(ws, start, end) {
  const range = XLSX.utils.aoa_to_sheet([[1, 2, 3]], { cellStyles: true })
  
  // 合并单元格逻辑
  ws['!merges'] = [{s: {c:0, r:0}, e: {c:2, r:0}}]
  
  return ws
}

八、性能与工程实践

1. 性能优化策略

问题	解决方案
大数据量导出	分页处理 + Web Worker
内存溢出	使用流式处理
样式计算耗时	预处理样式对象

2. 安全注意事项

数据脱敏：导出时对敏感字段进行过滤
文件大小限制：设置最大导出行数
权限控制：限制导出功能的使用场景

3. 异常处理机制

try {
  exportExcel()
} catch (error) {
  console.error('导出失败:', error)
  // 显示错误提示
}

九、常见问题与踩坑

1. 样式未生效

原因：cellStyles选项未正确启用

解决方案：

XLSX.utils.aoa_to_sheet(data, { cellStyles: true })

2. 样式覆盖问题

错误示例：

Object.assign(ws[cell], styles)

正确做法：

Object.assign(ws[cell], styles, { ...ws[cell] })

3. 导出文件类型错误