Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到Excel的7種方法

更新時(shí)間：2025年05月19日 08:30:10 作者：百錦再@新空間

在現(xiàn)代Web應(yīng)用開(kāi)發(fā)中,數(shù)據(jù)導(dǎo)出為Excel是一項(xiàng)常見(jiàn)且重要的功能需求,本文將全面探討Vue環(huán)境下實(shí)現(xiàn)Excel導(dǎo)出的7種主要方法,希望對(duì)大家有所幫助

1. 前言

在現(xiàn)代Web應(yīng)用開(kāi)發(fā)中，數(shù)據(jù)導(dǎo)出為Excel是一項(xiàng)常見(jiàn)且重要的功能需求。Vue.js作為當(dāng)前流行的前端框架，提供了多種實(shí)現(xiàn)Excel導(dǎo)出的方法。本文將全面探討Vue環(huán)境下實(shí)現(xiàn)Excel導(dǎo)出的7種主要方法，包括原生JavaScript實(shí)現(xiàn)、常用第三方庫(kù)方案以及服務(wù)器端導(dǎo)出方案，每種方法都將提供詳細(xì)的代碼示例和優(yōu)劣分析。

2. 原生JavaScript實(shí)現(xiàn)方案

2.1 使用Blob對(duì)象和URL.createObjectURL

這種方法不依賴任何第三方庫(kù)，純粹使用瀏覽器原生API實(shí)現(xiàn)。

實(shí)現(xiàn)原理：

將數(shù)據(jù)轉(zhuǎn)換為CSV格式字符串
使用Blob對(duì)象創(chuàng)建文件
通過(guò)創(chuàng)建臨時(shí)URL觸發(fā)下載

代碼示例：

export function exportToCSV(filename, rows) {
  const processRow = (row) => {
    return row.map(value => {
      // 處理值中的特殊字符
      if (value === null || value === undefined) return ''
      value = String(value)
      value = value.replace(/"/g, '""')
      if (value.search(/[",\n]/g) >= 0) {
        value = `"${value}"`
      }
      return value
    }).join(',')
  }

  let csvContent = ''
  if (rows.length > 0) {
    // 添加表頭
    csvContent += processRow(Object.keys(rows[0])) + '\r\n'
    
    // 添加數(shù)據(jù)行
    rows.forEach(row => {
      csvContent += processRow(Object.values(row)) + '\r\n'
    })
  }

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  
  link.setAttribute('href', url)
  link.setAttribute('download', filename)
  link.style.visibility = 'hidden'
  
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

???????// Vue組件中使用
methods: {
  exportData() {
    const data = [
      { id: 1, name: '張三', age: 25 },
      { id: 2, name: '李四', age: 30 }
    ]
    exportToCSV('用戶數(shù)據(jù).csv', data)
  }
}

優(yōu)點(diǎn)：

零依賴，不增加項(xiàng)目體積
實(shí)現(xiàn)簡(jiǎn)單，適合小型項(xiàng)目
生成的CSV文件兼容Excel

缺點(diǎn)：

只能生成CSV格式，不是真正的Excel文件
不支持復(fù)雜格式（合并單元格、樣式等）
大數(shù)據(jù)量可能導(dǎo)致性能問(wèn)題

2.2 使用Base64編碼實(shí)現(xiàn)

這種方法與Blob方案類似，但使用Base64編碼方式。

代碼示例：

export function exportToExcelBase64(filename, data) {
  let csv = '\uFEFF' // BOM頭，解決中文亂碼
  
  // 添加表頭
  csv += Object.keys(data[0]).join(',') + '\r\n'
  
  // 添加數(shù)據(jù)行
  data.forEach(item => {
    csv += Object.values(item).join(',') + '\r\n'
  })
  
  const base64 = btoa(unescape(encodeURIComponent(csv)))
  const link = document.createElement('a')
  link.href = `data:text/csv;base64,${base64}`
  link.download = filename
  link.click()
}

優(yōu)點(diǎn)：

更簡(jiǎn)單的實(shí)現(xiàn)方式
兼容性較好

缺點(diǎn)：

同樣只能生成CSV格式
大數(shù)據(jù)量可能有問(wèn)題

3. 常用第三方庫(kù)方案

3.1 使用SheetJS (xlsx)

SheetJS是目前功能最強(qiáng)大、使用最廣泛的JavaScript Excel處理庫(kù)。

安裝：

npm install xlsx

基礎(chǔ)實(shí)現(xiàn)：

import XLSX from 'xlsx'

export function exportExcelWithXLSX(filename, data, sheetName = 'Sheet1') {
  // 創(chuàng)建工作簿
  const wb = XLSX.utils.book_new()
  
  // 將數(shù)據(jù)轉(zhuǎn)換為工作表
  const ws = XLSX.utils.json_to_sheet(data)
  
  // 將工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, sheetName)
  
  // 生成Excel文件并下載
  XLSX.writeFile(wb, filename)
}

???????// Vue組件中使用
methods: {
  exportData() {
    const data = [
      { "姓名": "張三", "年齡": 25, "部門": "研發(fā)" },
      { "姓名": "李四", "年齡": 30, "部門": "市場(chǎng)" }
    ]
    exportExcelWithXLSX('員工數(shù)據(jù).xlsx', data)
  }
}

高級(jí)功能示例：

function advancedExport() {
  // 創(chuàng)建復(fù)雜工作簿
  const wb = XLSX.utils.book_new()
  
  // 多個(gè)工作表
  const ws1 = XLSX.utils.json_to_sheet(data1, { header: ['列1', '列2'] })
  const ws2 = XLSX.utils.json_to_sheet(data2)
  
  // 添加工作表
  XLSX.utils.book_append_sheet(wb, ws1, '第一頁(yè)')
  XLSX.utils.book_append_sheet(wb, ws2, '第二頁(yè)')
  
  // 設(shè)置列寬
  ws1['!cols'] = [{ width: 20 }, { width: 15 }]
  
  // 設(shè)置凍結(jié)窗格
  ws1['!freeze'] = { xSplit: 1, ySplit: 1 }
  
  // 生成文件
  XLSX.writeFile(wb, '高級(jí)導(dǎo)出.xlsx')
}

優(yōu)點(diǎn)：

功能全面，支持Excel所有特性
支持多種格式（XLSX, XLS, CSV等）
支持大數(shù)據(jù)量（使用流式API）
活躍的社區(qū)支持

缺點(diǎn)：

庫(kù)體積較大（約1MB）
復(fù)雜功能API學(xué)習(xí)曲線較陡

3.2 使用ExcelJS

ExcelJS是另一個(gè)強(qiáng)大的Excel處理庫(kù)，特別適合需要復(fù)雜樣式和格式的場(chǎng)景。

安裝：

npm install exceljs

基礎(chǔ)實(shí)現(xiàn)：

import ExcelJS from 'exceljs'

???????export async function exportWithExcelJS(filename, data) {
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet('數(shù)據(jù)')
  
  // 添加表頭
  const headers = Object.keys(data[0])
  worksheet.addRow(headers)
  
  // 添加數(shù)據(jù)
  data.forEach(item => {
    worksheet.addRow(Object.values(item))
  })
  
  // 設(shè)置樣式
  worksheet.getRow(1).eachCell(cell => {
    cell.font = { bold: true }
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FFD3D3D3' }
    }
  })
  
  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer()
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  saveAs(blob, filename)
}

???????// 需要file-saver支持下載
import { saveAs } from 'file-saver'

高級(jí)功能示例：

async function advancedExcelJSExport() {
  const workbook = new ExcelJS.Workbook()
  workbook.creator = 'My App'
  workbook.lastModifiedBy = 'User'
  workbook.created = new Date()
  
  const worksheet = workbook.addWorksheet('高級(jí)報(bào)表')
  
  // 合并單元格
  worksheet.mergeCells('A1:D1')
  const titleRow = worksheet.getCell('A1')
  titleRow.value = '銷售報(bào)表'
  titleRow.font = { size: 18, bold: true }
  titleRow.alignment = { horizontal: 'center' }
  
  // 添加帶樣式的數(shù)據(jù)
  const data = [
    { id: 1, product: '產(chǎn)品A', sales: 1500, target: 1200 },
    { id: 2, product: '產(chǎn)品B', sales: 2100, target: 2000 }
  ]
  
  // 添加表頭
  worksheet.addRow(['ID', '產(chǎn)品', '銷售額', '目標(biāo)'])
  
  // 添加數(shù)據(jù)并設(shè)置條件格式
  data.forEach(item => {
    const row = worksheet.addRow([item.id, item.product, item.sales, item.target])
    
    // 銷售額超過(guò)目標(biāo)顯示綠色
    if (item.sales > item.target) {
      row.getCell(3).fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FF00FF00' }
      }
    }
  })
  
  // 添加公式
  worksheet.addRow(['總計(jì)', '', { formula: 'SUM(C2:C3)' }, { formula: 'SUM(D2:D3)' }])
  
  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer()
  saveAs(new Blob([buffer]), '高級(jí)報(bào)表.xlsx')
}

優(yōu)點(diǎn)：

樣式控制更精細(xì)
支持更復(fù)雜的Excel功能（公式、條件格式等）
良好的TypeScript支持
支持流式處理大數(shù)據(jù)

缺點(diǎn)：

API更復(fù)雜
需要配合file-saver實(shí)現(xiàn)下載
文檔相對(duì)較少

3.3 使用vue-json-excel

vue-json-excel是一個(gè)專門為Vue設(shè)計(jì)的Excel導(dǎo)出組件，使用簡(jiǎn)單。

安裝：

npm install vue-json-excel

基本使用：

<template>
  <div>
    <download-excel
      :data="tableData"
      :fields="jsonFields"
      name="導(dǎo)出數(shù)據(jù).xls"
      type="xls"
    >
      <button>導(dǎo)出Excel</button>
    </download-excel>
  </div>
</template>

<script>
import DownloadExcel from 'vue-json-excel'

???????export default {
  components: {
    DownloadExcel
  },
  data() {
    return {
      tableData: [
        { name: '張三', age: 25, department: '研發(fā)' },
        { name: '李四', age: 30, department: '市場(chǎng)' }
      ],
      jsonFields: {
        '姓名': 'name',
        '年齡': 'age',
        '部門': 'department'
      }
    }
  }
}
</script>

高級(jí)功能：

<template>
  <download-excel
    :data="filteredData"
    :fields="{
      'ID': 'id',
      '產(chǎn)品名稱': {
        field: 'name',
        callback: (value) => `產(chǎn)品: ${value}`
      },
      '價(jià)格': {
        field: 'price',
        callback: (value) => `￥${value.toFixed(2)}`
      },
      '狀態(tài)': {
        field: 'status',
        callback: (value) => value ? '上架' : '下架'
      }
    }"
    :before-generate="beforeDownload"
    :before-finish="afterDownload"
    name="產(chǎn)品列表.xls"
    worksheet="產(chǎn)品數(shù)據(jù)"
  >
    <button>導(dǎo)出產(chǎn)品數(shù)據(jù)</button>
  </download-excel>
</template>

???????<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '手機(jī)', price: 2999, status: true },
        { id: 2, name: '電腦', price: 5999, status: false }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.products.filter(p => p.status)
    }
  },
  methods: {
    beforeDownload() {
      console.log('即將開(kāi)始導(dǎo)出')
      // 可以在這里顯示加載狀態(tài)
    },
    afterDownload() {
      console.log('導(dǎo)出完成')
      // 可以在這里隱藏加載狀態(tài)
    }
  }
}
</script>

優(yōu)點(diǎn)：

專為Vue設(shè)計(jì)，集成簡(jiǎn)單
支持自定義字段映射
支持?jǐn)?shù)據(jù)預(yù)處理
輕量級(jí)

缺點(diǎn)：

功能相對(duì)簡(jiǎn)單
只能生成XLS格式（老版Excel格式）
不支持復(fù)雜樣式

4. 服務(wù)器端導(dǎo)出方案

4.1 前端請(qǐng)求服務(wù)器生成Excel

這種方案將導(dǎo)出邏輯放在服務(wù)器端，前端只負(fù)責(zé)觸發(fā)和下載。

前端代碼：

export function requestServerExport(params) {
  return axios({
    url: '/api/export-excel',
    method: 'POST',
    data: params,
    responseType: 'blob'
  }).then(response => {
    const blob = new Blob([response.data], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '服務(wù)器導(dǎo)出.xlsx')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

???????// Vue組件中使用
methods: {
  async exportFromServer() {
    try {
      this.loading = true
      await requestServerExport({
        startDate: '2023-01-01',
        endDate: '2023-12-31',
        department: 'sales'
      })
    } catch (error) {
      console.error('導(dǎo)出失敗:', error)
    } finally {
      this.loading = false
    }
  }
}

Node.js服務(wù)器端示例：

const express = require('express')
const ExcelJS = require('exceljs')
const app = express()

app.post('/api/export-excel', async (req, res) => {
  try {
    const { startDate, endDate, department } = req.body
    
    // 從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)
    const data = await getDataFromDatabase(startDate, endDate, department)
    
    // 創(chuàng)建Excel
    const workbook = new ExcelJS.Workbook()
    const worksheet = workbook.addWorksheet('銷售數(shù)據(jù)')
    
    // 添加數(shù)據(jù)
    worksheet.addRow(['日期', '銷售員', '金額', '產(chǎn)品'])
    data.forEach(item => {
      worksheet.addRow([item.date, item.salesman, item.amount, item.product])
    })
    
    // 設(shè)置響應(yīng)頭
    res.setHeader(
      'Content-Type',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    )
    res.setHeader(
      'Content-Disposition',
      'attachment; filename="sales_report.xlsx"'
    )
    
    // 發(fā)送Excel文件
    await workbook.xlsx.write(res)
    res.end()
  } catch (error) {
    console.error('導(dǎo)出錯(cuò)誤:', error)
    res.status(500).send('導(dǎo)出失敗')
  }
})

app.listen(3000, () => console.log('Server running on port 3000'))

優(yōu)點(diǎn)：

處理大數(shù)據(jù)量更高效
減輕前端壓力
可以復(fù)用服務(wù)器端數(shù)據(jù)處理邏輯
更安全，業(yè)務(wù)邏輯不暴露在客戶端

缺點(diǎn)：

增加服務(wù)器負(fù)載
需要網(wǎng)絡(luò)請(qǐng)求，可能有延遲
實(shí)現(xiàn)復(fù)雜度更高

4.2 使用Web Worker處理大數(shù)據(jù)導(dǎo)出

對(duì)于特別大的數(shù)據(jù)集，可以使用Web Worker在后臺(tái)線程中處理導(dǎo)出，避免阻塞UI。

worker.js:

importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js')

???????self.onmessage = function(e) {
  const { data, fileName } = e.data
  
  try {
    // 創(chuàng)建工作簿
    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.json_to_sheet(data)
    XLSX.utils.book_append_sheet(wb, ws, '數(shù)據(jù)')
    
    // 生成文件
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
    
    // 發(fā)送回主線程
    self.postMessage({
      success: true,
      fileName,
      data: wbout
    })
  } catch (error) {
    self.postMessage({
      success: false,
      error: error.message
    })
  }
}

Vue組件中使用:

methods: {
  exportLargeData() {
    this.loading = true
    
    // 創(chuàng)建Worker
    const worker = new Worker('./excel.worker.js')
    
    // 準(zhǔn)備數(shù)據(jù)
    const largeData = this.generateLargeDataSet() // 假設(shè)有大量數(shù)據(jù)
    
    // 發(fā)送到Worker
    worker.postMessage({
      data: largeData,
      fileName: '大數(shù)據(jù)導(dǎo)出.xlsx'
    })
    
    // 接收結(jié)果
    worker.onmessage = (e) => {
      this.loading = false
      
      if (e.data.success) {
        const blob = new Blob([e.data.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        saveAs(blob, e.data.fileName)
      } else {
        console.error('導(dǎo)出失敗:', e.data.error)
      }
      
      worker.terminate()
    }
  }
}

優(yōu)點(diǎn)：

不阻塞UI
可以處理非常大的數(shù)據(jù)集
保持前端導(dǎo)出體驗(yàn)

缺點(diǎn)：

實(shí)現(xiàn)復(fù)雜度高
兼容性問(wèn)題（舊瀏覽器不支持）
Worker不能直接訪問(wèn)DOM

5. 方法對(duì)比與選擇指南

5.1 功能對(duì)比表

方法	格式支持	樣式支持	大數(shù)據(jù)支持	復(fù)雜度	依賴大小	適用場(chǎng)景
原生Blob CSV	CSV	無(wú)	有限	低	無(wú)	簡(jiǎn)單CSV導(dǎo)出
SheetJS	XLSX/XLS/CSV	豐富	優(yōu)秀	中	~1MB	專業(yè)Excel導(dǎo)出
ExcelJS	XLSX	非常豐富	優(yōu)秀	高	~500KB	復(fù)雜格式報(bào)表
vue-json-excel	XLS	基本	有限	低	~50KB	簡(jiǎn)單Vue集成
服務(wù)器導(dǎo)出	任意	任意	優(yōu)秀	高	無(wú)	大數(shù)據(jù)/安全場(chǎng)景
Web Worker	依賴庫(kù)	依賴庫(kù)	優(yōu)秀	高	依賴庫(kù)	前端大數(shù)據(jù)

5.2 選擇建議

簡(jiǎn)單CSV導(dǎo)出：使用原生Blob方案，零依賴且實(shí)現(xiàn)簡(jiǎn)單

標(biāo)準(zhǔn)Excel導(dǎo)出：選擇SheetJS，功能全面且文檔豐富

復(fù)雜格式報(bào)表：使用ExcelJS，樣式控制更精細(xì)

Vue項(xiàng)目快速集成：考慮vue-json-excel，專為Vue設(shè)計(jì)

大數(shù)據(jù)量場(chǎng)景：優(yōu)先服務(wù)器端導(dǎo)出，次選Web Worker方案

安全性要求高：必須使用服務(wù)器端導(dǎo)出，避免業(yè)務(wù)邏輯暴露

5.3 性能優(yōu)化建議

分頁(yè)導(dǎo)出：對(duì)于大數(shù)據(jù)集，實(shí)現(xiàn)分頁(yè)或分塊導(dǎo)出

數(shù)據(jù)預(yù)處理：在導(dǎo)出前過(guò)濾和精簡(jiǎn)數(shù)據(jù)

Web Worker：超過(guò)10萬(wàn)行數(shù)據(jù)考慮使用Web Worker

進(jìn)度反饋：長(zhǎng)時(shí)間導(dǎo)出提供進(jìn)度提示

服務(wù)器緩存：頻繁使用的報(bào)表在服務(wù)器端緩存結(jié)果

懶加載：只在用戶請(qǐng)求時(shí)加載導(dǎo)出庫(kù)

6. 最佳實(shí)踐示例

6.1 完整的企業(yè)級(jí)導(dǎo)出組件

<template>
  <div class="excel-exporter">
    <button 
      @click="handleExport"
      :disabled="loading"
      class="export-button"
    >
      <span v-if="!loading">導(dǎo)出Excel</span>
      <span v-else>導(dǎo)出中...</span>
    </button>
    
    <div v-if="showOptions" class="export-options">
      <label>
        <input type="checkbox" v-model="exportSelected"> 僅導(dǎo)出選中項(xiàng)
      </label>
      <label>
        <input type="checkbox" v-model="includeHidden"> 包含隱藏列
      </label>
      <select v-model="exportFormat">
        <option value="xlsx">XLSX (Excel 2007+)</option>
        <option value="csv">CSV</option>
      </select>
    </div>
    
    <progress 
      v-if="loading && progress > 0"
      :value="progress"
      max="100"
      class="export-progress"
    ></progress>
  </div>
</template>

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

export default {
  name: 'ExcelExporter',
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    selectedItems: {
      type: Array,
      default: () => []
    },
    fileName: {
      type: String,
      default: 'export'
    },
    showOptions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      progress: 0,
      exportSelected: false,
      includeHidden: false,
      exportFormat: 'xlsx'
    }
  },
  methods: {
    async handleExport() {
      try {
        this.loading = true
        this.progress = 0
        
        // 準(zhǔn)備導(dǎo)出數(shù)據(jù)
        const exportData = this.getExportData()
        
        // 模擬進(jìn)度更新
        const progressInterval = setInterval(() => {
          this.progress = Math.min(this.progress + 10, 90)
        }, 200)
        
        // 導(dǎo)出
        if (this.exportFormat === 'xlsx') {
          await this.exportXLSX(exportData)
        } else {
          this.exportCSV(exportData)
        }
        
        this.progress = 100
        this.$emit('export-success')
      } catch (error) {
        console.error('導(dǎo)出失敗:', error)
        this.$emit('export-error', error)
      } finally {
        clearInterval(progressInterval)
        setTimeout(() => {
          this.loading = false
          this.progress = 0
        }, 500)
      }
    },
    
    getExportData() {
      // 確定要導(dǎo)出的數(shù)據(jù)
      let data = this.exportSelected && this.selectedItems.length > 0 
        ? this.selectedItems 
        : this.data
      
      // 處理列
      const visibleColumns = this.includeHidden 
        ? this.columns 
        : this.columns.filter(col => !col.hidden)
      
      // 轉(zhuǎn)換數(shù)據(jù)格式
      return data.map(item => {
        const row = {}
        visibleColumns.forEach(col => {
          row[col.label || col.prop] = item[col.prop]
        })
        return row
      })
    },
    
    exportXLSX(data) {
      return new Promise(resolve => {
        // 創(chuàng)建工作簿
        const wb = XLSX.utils.book_new()
        const ws = XLSX.utils.json_to_sheet(data)
        
        // 設(shè)置列寬
        const colWidths = this.columns.map(col => ({
          width: col.width ? col.width / 7 : 15 // px轉(zhuǎn)Excel寬度單位
        }))
        ws['!cols'] = colWidths
        
        // 添加工作表
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
        
        // 生成文件
        const wbout = XLSX.write(wb, { 
          bookType: 'xlsx', 
          type: 'array' 
        })
        
        const blob = new Blob([wbout], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        
        saveAs(blob, `${this.fileName}.xlsx`)
        resolve()
      })
    },
    
    exportCSV(data) {
      // 簡(jiǎn)單的CSV導(dǎo)出實(shí)現(xiàn)
      let csv = '\uFEFF' // BOM頭
      
      // 表頭
      const headers = Object.keys(data[0])
      csv += headers.join(',') + '\r\n'
      
      // 數(shù)據(jù)行
      data.forEach(item => {
        csv += headers.map(key => {
          let value = item[key]
          if (typeof value === 'string') {
            value = value.replace(/"/g, '""')
            if (value.includes(',')) {
              value = `"${value}"`
            }
          }
          return value
        }).join(',') + '\r\n'
      })
      
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
      saveAs(blob, `${this.fileName}.csv`)
    }
  }
}
</script>

<style scoped>
.excel-exporter {
  display: inline-block;
  position: relative;
}

.export-button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.export-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.export-options {
  margin-top: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.export-progress {
  width: 100%;
  margin-top: 10px;
}
</style>

6.2 使用示例

<template>
  <div>
    <h1>員工數(shù)據(jù)</h1>
    
    <el-table 
      :data="employeeData" 
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="department" label="部門"></el-table-column>
      <el-table-column prop="salary" label="薪資" :formatter="formatSalary"></el-table-column>
      <el-table-column prop="joinDate" label="入職日期" :formatter="formatDate"></el-table-column>
    </el-table>
    
    <excel-exporter
      :data="employeeData"
      :columns="tableColumns"
      :selected-items="selectedEmployees"
      file-name="員工數(shù)據(jù)"
      @export-success="onExportSuccess"
      @export-error="onExportError"
    ></excel-exporter>
  </div>
</template>

<script>
import ExcelExporter from '@/components/ExcelExporter'

export default {
  components: {
    ExcelExporter
  },
  data() {
    return {
      employeeData: [
        { id: 1, name: '張三', department: '研發(fā)', salary: 15000, joinDate: '2020-05-10' },
        { id: 2, name: '李四', department: '市場(chǎng)', salary: 12000, joinDate: '2019-11-15' },
        // 更多數(shù)據(jù)...
      ],
      selectedEmployees: [],
      tableColumns: [
        { prop: 'id', label: 'ID', width: 80 },
        { prop: 'name', label: '姓名', width: 120 },
        { prop: 'department', label: '部門', width: 100 },
        { prop: 'salary', label: '薪資', width: 100 },
        { prop: 'joinDate', label: '入職日期', width: 120 }
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedEmployees = val
    },
    formatSalary(row) {
      return `￥${row.salary.toLocaleString()}`
    },
    formatDate(row) {
      return new Date(row.joinDate).toLocaleDateString()
    },
    onExportSuccess() {
      this.$message.success('導(dǎo)出成功')
    },
    onExportError() {
      this.$message.error('導(dǎo)出失敗')
    }
  }
}
</script>

7. 常見(jiàn)問(wèn)題與解決方案

7.1 中文亂碼問(wèn)題

問(wèn)題描述：導(dǎo)出的Excel文件用Excel打開(kāi)時(shí)中文顯示為亂碼。

解決方案：

對(duì)于CSV文件，添加UTF-8 BOM頭：

const csv = '\uFEFF' + csvContent

對(duì)于XLSX文件，確保使用正確的編碼：

const blob = new Blob([content], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })

7.2 大數(shù)據(jù)量導(dǎo)致瀏覽器卡死

解決方案：

使用分塊處理：

async function exportLargeData(data, chunkSize = 10000) {
  const wb = new ExcelJS.Workbook()
  const ws = wb.addWorksheet('數(shù)據(jù)')
  
  // 添加表頭
  ws.addRow(Object.keys(data[0]))
  
  // 分塊添加數(shù)據(jù)
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize)
    chunk.forEach(row => ws.addRow(Object.values(row)))
    
    // 釋放事件循環(huán)
    await new Promise(resolve => setTimeout(resolve, 0))
  }
  
  // 生成文件
  const buffer = await wb.xlsx.writeBuffer()
  saveAs(new Blob([buffer]), '大數(shù)據(jù)導(dǎo)出.xlsx')
}

使用Web Worker（如前文示例）

考慮服務(wù)器端導(dǎo)出

7.3 復(fù)雜表頭導(dǎo)出

解決方案：使用合并單元格和嵌套表頭

function exportComplexHeader() {
  const wb = new ExcelJS.Workbook()
  const ws = wb.addWorksheet('復(fù)雜表頭')
  
  // 合并標(biāo)題行
  ws.mergeCells('A1:E1')
  const titleCell = ws.getCell('A1')
  titleCell.value = '2023年度銷售報(bào)表'
  titleCell.font = { bold: true, size: 16 }
  titleCell.alignment = { horizontal: 'center' }
  
  // 一級(jí)表頭
  ws.mergeCells('A2:C2')
  ws.getCell('A2').value = '銷售數(shù)據(jù)'
  ws.mergeCells('D2:E2')
  ws.getCell('D2').value = '財(cái)務(wù)數(shù)據(jù)'
  
  // 二級(jí)表頭
  ws.getCell('A3').value = '日期'
  ws.getCell('B3').value = '銷售員'
  ws.getCell('C3').value = '金額'
  ws.getCell('D3').value = '成本'
  ws.getCell('E3').value = '利潤(rùn)'
  
  // 添加數(shù)據(jù)...
  
  return wb.xlsx.writeBuffer()
}

7.4 樣式不一致問(wèn)題

問(wèn)題描述：在不同Excel版本或不同設(shè)備上打開(kāi)時(shí)樣式顯示不一致。

解決方案：

盡量使用基本樣式，避免過(guò)于復(fù)雜的格式
對(duì)于關(guān)鍵樣式，提供多種兼容設(shè)置
在用戶指南中說(shuō)明最佳查看方式
考慮導(dǎo)出為PDF作為替代方案

8. 總結(jié)

本文詳細(xì)介紹了Vue環(huán)境下實(shí)現(xiàn)Excel導(dǎo)出的多種方法，從簡(jiǎn)單的原生實(shí)現(xiàn)到復(fù)雜的專業(yè)庫(kù)方案，涵蓋了各種應(yīng)用場(chǎng)景。選擇合適的方法需要根據(jù)項(xiàng)目具體需求：