vue：功能【xlsx】纯前端导出Excel

'# vue：功能【xlsx】纯前端导出Excel

一、背景与问题

在现代Web开发中，用户常常需要将页面中的表格数据导出为Excel文件。传统方案通常需要后端接口配合，但随着业务复杂度提升，纯前端导出方案逐渐成为主流。这种方案的优势在于无需服务器介入，节省网络资源，但同时也面临诸多技术挑战：

如何在浏览器端高效生成Excel格式
如何处理复杂数据类型（数字格式、日期格式、合并单元格等）
如何保证导出性能（尤其是大数据量场景）
如何处理样式丢失问题（字体、颜色、边框等）
如何避免浏览器兼容性问题

本文将深入探讨基于SheetJS库的纯前端Excel导出方案，分析其工作原理，提供完整实现示例，并讨论适用场景与性能优化策略。

二、基本原理

纯前端导出Excel的核心原理是通过JavaScript操作DOM生成表格结构，然后使用SheetJS库将表格数据转换为Excel格式的二进制流，最后通过Blob和FileSaver.js触发下载。

这个过程包含以下几个关键步骤：

数据准备：将表格数据转换为二维数组，包含表头和数据行
样式处理：保留字体、颜色、边框等样式信息
格式转换：使用SheetJS将数据转换为Excel格式的二进制流
文件生成：通过Blob对象创建Excel文件，使用FileSaver.js触发下载

三、环境准备

在开始开发前，需要准备以下环境：

开发依赖：
```
npm install xlsx file-saver
```

项目结构建议：

src/
├── components/
│   └── ExcelExport.vue
├── utils/
│   └── excel.ts
├── assets/
│   └── styles.css

浏览器兼容性：
支持所有现代浏览器（Chrome 45+，Firefox 35+，Edge 12+，Safari 9+）
注意IE11的兼容性问题（需使用polyfill）

四、核心实现

1. 基础导出实现

<template>
  <div>
    <table ref="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.city }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      data: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }
      ]
    }
  },
  methods: {
    exportExcel() {
      const table = this.$refs.table
      const wsData = XLSX.utils.aoa_to_sheet([
        ['姓名', '年龄', '城市'],
        ...this.data.map(item => [item.name, item.age, item.city])
      ])
      
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, wsData, 'Sheet1')
      
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
      saveAs(blob, '用户数据.xlsx')
    }
  }
}
</script>

关键代码解释：

XLSX.utils.aoa_to_sheet：将二维数组转换为工作表对象
XLSX.utils.book_new()：创建新的工作簿对象
XLSX.write()：将工作簿写入二进制缓冲区
saveAs()：触发文件下载

2. 带样式导出实现

function getStylesFromTable(table) {
  const styles = {}
  const rows = table.querySelectorAll('tr')
  rows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('td, th')
    cells.forEach((cell, cellIndex) => {
      const style = window.getComputedStyle(cell)
      const styleKey = `row${rowIndex}col${cellIndex}`
      
      styles[styleKey] = {
        font: style.fontFamily || 'Arial',
        size: style.fontSize,
        color: style.color,
        bg: style.backgroundColor,
        border: style.border,
        align: style.textAlign
      }
    })
  })
  return styles
}

function applyStylesToSheet(ws, styles) {
  const styleProps = ['font', 'size', 'color', 'bg', 'border', 'align']
  for (const [key, style] of Object.entries(styles)) {
    const [row, col] = key.split('row').pop().split('col')
    const cellRef = XLSX.utils.encode_cell({ r: parseInt(row), c: parseInt(col) })
    
    styleProps.forEach(prop => {
      if (style[prop]) {
        ws[cellRef][prop] = style[prop]
      }
    })
  }
}

关键代码解释：

window.getComputedStyle()：获取DOM元素样式
XLSX.utils.encode_cell()：将行列索引转换为Excel单元格引用
通过ws[cellRef]设置单元格样式
处理字体、字号、颜色、背景色、边框、对齐等样式属性

3. 多sheet导出实现

function exportMultipleSheets(data, sheetNames) {
  const wb = XLSX.utils.book_new()
  
  sheetNames.forEach((sheetName, index) => {
    const wsData = XLSX.utils.aoa_to_sheet([
      [sheetName],
      ...data[index].map(item => [
        item.name, 
        item.age, 
        item.city, 
        item.email
      ])
    ])
    
    // 添加样式
    const ws = XLSX.utils.aoa_to_sheet([
      ['Sheet', 'Name', 'Age', 'City', 'Email'],
      ['Header', 'Row', '1', '1', '1']
    ])
    
    XLSX.utils.book_append_sheet(wb, wsData, sheetName)
  })
  
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  saveAs(blob, '多sheet数据.xlsx')
}

关键代码解释：

XLSX.utils.aoa_to_sheet()处理多个sheet的数据
XLSX.utils.book_append_sheet()添加多个sheet到工作簿
支持不同sheet的标题和数据内容

五、完整案例

1. 组件实现（ExcelExport.vue）

<template>
  <div class="excel-export">
    <div class="table-container">
      <table ref="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
            <th>邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in data" :key="index">
            <td>{{ row.name }}</td>
            <td>{{ row.age }}</td>
            <td>{{ row.city }}</td>
            <td>{{ row.email }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="controls">
      <button @click="exportExcel">导出Excel</button>
      <button @click="exportWithStyles">导出带样式</button>
      <button @click="exportMultipleSheets">导出多sheet</button>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      data: [
        { name: '张三', age: 25, city: '北京', email: 'zhangsan@example.com' },
        { name: '李四', age: 30, city: '上海', email: 'lisi@example.com' },
        { name: '王五', age: 28, city: '广州', email: 'wangwu@example.com' },
        { name: '赵六', age: 35, city: '深圳', email: 'zhaoliu@example.com' }
      ]
    }
  },
  methods: {
    exportExcel() {
      const table = this.$refs.table
      const wsData = XLSX.utils.aoa_to_sheet([
        ['姓名', '年龄', '城市', '邮箱'],
        ...this.data.map(item => [item.name, item.age, item.city, item.email])
      ])
      
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, wsData, 'Sheet1')
      
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
      saveAs(blob, '用户数据.xlsx')
    },
    
    exportWithStyles() {
      const table = this.$refs.table
      const styles = getStylesFromTable(table)
      const wsData = XLSX.utils.aoa_to_sheet([
        ['姓名', '年龄', '城市', '邮箱'],
        ...this.data.map(item => [item.name, item.age, item.city, item.email])
      ])
      
      applyStylesToSheet(wsData, styles)
      
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, wsData, '带样式')
      
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
      saveAs(blob, '带样式数据.xlsx')
    },
    
    exportMultipleSheets() {
      const sheetNames = ['Sheet1', 'Sheet2', 'Sheet3']
      const sheetsData = [
        this.data,
        this.data.map(item => ({ ...item, city: '杭州' })),
        this.data.map(item => ({ ...item, city: '成都' }))
      ]
      
      const wb = XLSX.utils.book_new()
      
      sheetsData.forEach((sheetData, index) => {
        const wsData = XLSX.utils.aoa_to_sheet([
          [sheetNames[index]],
          ...sheetData.map(item => [
            item.name, 
            item.age, 
            item.city, 
            item.email
          ])
        ])
        
        XLSX.utils.book_append_sheet(wb, wsData, sheetNames[index])
      })
      
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
      saveAs(blob, '多sheet数据.xlsx')
    }
  }
}
</script>

<style scoped>
.excel-export {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.table-container {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.controls {
  display: flex;
  gap: 10px;
}
</style>

2. 样式处理函数（utils/excel.ts）

export function getStylesFromTable(table: HTMLElement): Record<string, any> {
  const styles: Record<string, any> = {}
  const rows = table.querySelectorAll('tr')
  rows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('td, th')
    cells.forEach((cell, cellIndex) => {
      const style = window.getComputedStyle(cell)
      const styleKey = `row${rowIndex}col${cellIndex}`
      
      styles[styleKey] = {
        font: style.fontFamily || 'Arial',
        size: style.fontSize,
        color: style.color,
        bg: style.backgroundColor,
        border: style.border,
        align: style.textAlign
      }
    })
  })
  return styles
}

export function applyStylesToSheet(ws: any, styles: Record<string, any>) {
  const styleProps = ['font', 'size', 'color', 'bg', 'border', 'align']
  for (const [key, style] of Object.entries(styles)) {
    const [row, col] = key.split('row').pop().split('col')
    const cellRef = XLSX.utils.encode_cell({ r: parseInt(row), c: parseInt(col) })
    
    styleProps.forEach(prop => {
      if (style[prop]) {
        ws[cellRef][prop] = style[prop]
      }
    })
  }
}

六、源码解析

1. SheetJS库核心原理

SheetJS（https://github.com/SheetJS/sheetjs）是一个基于纯JavaScript实现的Excel处理库，其核心原理包括：

使用Array和Object结构表示Excel工作表
支持多种格式（XLSX, XLS, CSV, JSON等）
内置类型转换系统（处理数字、日期、布尔值等）
内置样式处理系统（支持字体、颜色、边框等）

2. `XLSX.utils.aoa_to_sheet`源码分析

function aoa_to_sheet(data, opts) {
  const ws = {}
  const row = data.length ? data[0] : []
  const col = row.length ? row.length : 0
  let i, j, cell, ref, row_idx, cell_idx
  
  for (i = 0; i < data.length; i++) {
    row_idx = i
    for (j = 0; j < data[i].length; j++) {
      cell_idx = j
      cell = data[i][j]
      if (cell === null) continue
      ref = XLSX.utils.encode_cell({ r: row_idx, c: cell_idx })
      if (!ws[ref]) ws[ref] = {}
      if (cell && typeof cell === 'object') {
        // 处理样式
        if (cell.s) {
          for (const key in cell.s) {
            if (key in ws[ref]) {
              ws[ref][key] = cell.s[key]
            }
          }
        }
        // 处理公式
        if (cell.f) {
          ws[ref].f = cell.f
        }
        // 处理注释
        if (cell.c) {
          ws[ref].c = cell.c
        }
      } else {
        ws[ref] = cell
      }
    }
  }
  return ws
}

关键点：

将二维数组转换为工作表对象
处理单元格样式、公式、注释等
通过encode_cell生成Excel单元格引用

七、进阶使用

1. 导出复杂数据类型

支持导出包含日期、布尔值、数字等复杂类型的表格：

const data = [
  { name: '张三', age: 25, birth: new Date('1999-01-01'), isStudent: true },
  { name: '李四', age: 30, birth: new Date('1995-05-05'), isStudent: false }
]

const wsData = XLSX.utils.aoa_to_sheet([
  ['姓名', '年龄', '出生日期', '是否学生'],
  ...data.map(item => [
    item.name, 
    item.age, 
    item.birth.toLocaleDateString(), 
    item.isStudent ? '是' : '否'
  ])
])

2. 导出带合并单元格的表格

function mergeCells(ws, ranges) {
  const merge = { '1:2': 'A1:B1' }
  ranges.forEach(range => {
    const [start, end] = range
    const startRef = XLSX.utils.encode_cell(start)
    const endRef = XLSX.utils.encode_cell(end)
    merge[`${startRef}:${endRef}`] = `${startRef}:${endRef}`
  })
  
  const props = XLSX.utils.sheet_to_props(ws)
  props['!merges'] = merge
  return props
}

3. 导出带超链接的表格

const wsData = XLSX.utils.aoa_to_sheet([
  ['姓名', '链接'],
  ['百度', 'https://www.baidu.com']
])

wsData['A2'].f = 'HYPERLINK("https://www.baidu.com";"百度")'

八、性能与工程实践

1. 性能优化策略

场景	优化方案	说明
大数据量	分页导出	每次只处理1000行数据
复杂样式	延迟处理	使用requestAnimationFrame
频繁导出	缓存优化	使用memoization缓存样式数据
多sheet导出	并行处理	使用Web Worker处理

2. 异常处理机制

try {
  const wsData = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, wsData, 'Sheet1')
  
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  saveAs(blob, '数据.xlsx')
} catch (error) {
  console.error('导出Excel失败:', error)
  alert('导出Excel时发生错误，请检查数据格式')
}

3. 安全风险防范

风险	解决方案
敏感数据泄露	限制导出字段，避免导出身份证、银行卡等信息
跨域问题	使用CORS配置，避免直接访问本地文件系统
XSS攻击	对用户输入进行过滤，避免注入攻击
资源占用过高	设置导出最大行数限制，防止内存溢出

九、常见问题与踩坑

1. 常见错误及解决办法

错误	原因	解决办法
文件下载失败	浏览器未触发下载	确保`saveAs`正确调用
样式丢失	样式未正确转换	使用`getComputedStyle`获取样式
日期格式错误	未转换为字符串	使用`toLocaleDateString()`
中文乱码	编码未设置	设置`type: 'binary'`
火狐浏览器兼容问题	浏览器兼容性问题	使用`FileSaver.js`的最新版本

2. 高频问题分析

问题：导出的Excel文件打开后内容显示不全

原因分析：

数据行数超过Excel的默认显示行数（1048576行）
表格宽度超出Excel默认列宽
某些列的格式未正确转换

解决方案：

增加!ref属性指定范围
设置列宽
使用XLSX.utils.aoa_to_sheet时添加meta信息

const ws = XLSX.utils.aoa_to_sheet(data)
ws['!ref'] = 'A1:Z1000'

十、最佳实践

1. 推荐实践方案

小型数据量：使用基础导出方案，简单高效
中等数据量：使用带样式导出方案，保持格式一致
大数据量：分页导出，结合Web Worker处理
复杂需求：使用SheetJS的完整API，支持所有Excel功能

2. 实施建议

对关键业务数据进行导出测试
建立导出缓存机制
对导出文件进行校验
对用户输入进行安全过滤
对敏感数据进行脱敏处理

十一、总结

在Vue项目中实现纯前端导出Excel功能，需要深入理解SheetJS库的工作原理，掌握数据转换、样式处理、多sheet管理等关键技术。本文通过三个代码示例，展示了从基础导出到带样式、多sheet的完整实现，同时分析了性能优化、安全风险和常见问题。

建议在以下场景使用纯前端导出：

数据量较小（<10万行）
不需要复杂格式（如图表、公式）
用户需要立即看到结果
不涉及敏感数据

不建议使用纯前端导出的情况：

数据量极大（>100万行）
需要复杂的Excel功能（如图表、宏）
涉及敏感数据（如身份证、银行卡）
需要服务器端验证

在实际开发中，应根据业务需求选择合适的方案，合理权衡性能、安全和用户体验。对于复杂需求，建议结合后端服务进行处理，以获得更稳定和可扩展的解决方案。

vue：功能【xlsx】纯前端导出Excel

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础导出实现

2. 带样式导出实现

3. 多sheet导出实现

五、完整案例

1. 组件实现（ExcelExport.vue）

2. 样式处理函数（utils/excel.ts）

六、源码解析

1. SheetJS库核心原理

2. `XLSX.utils.aoa_to_sheet`源码分析

七、进阶使用

1. 导出复杂数据类型

2. 导出带合并单元格的表格

3. 导出带超链接的表格

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全风险防范

九、常见问题与踩坑

1. 常见错误及解决办法

2. 高频问题分析

十、最佳实践

1. 推荐实践方案

2. 实施建议

十一、总结

评论已关闭

推荐阅读

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础导出实现

2. 带样式导出实现

3. 多sheet导出实现

五、完整案例

1. 组件实现（ExcelExport.vue）

2. 样式处理函数（utils/excel.ts）

六、源码解析

1. SheetJS库核心原理

2. XLSX.utils.aoa_to_sheet源码分析

七、进阶使用

1. 导出复杂数据类型

2. 导出带合并单元格的表格

3. 导出带超链接的表格

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全风险防范

九、常见问题与踩坑

1. 常见错误及解决办法

2. 高频问题分析

十、最佳实践

1. 推荐实践方案

2. 实施建议

十一、总结

评论已关闭

推荐阅读

2. `XLSX.utils.aoa_to_sheet`源码分析