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)
  }
}

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()
}

npm install xlsx

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, "部門": "市場" }
    ]
    exportExcelWithXLSX('員工數(shù)據(jù).xlsx', data)
  }
}

function advancedExport() {
  // 創(chuàng)建復(fù)雜工作簿
  const wb = XLSX.utils.book_new()
  
  // 多個工作表
  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, '第一頁')
  XLSX.utils.book_append_sheet(wb, ws2, '第二頁')
  
  // 設(shè)置列寬
  ws1['!cols'] = [{ width: 20 }, { width: 15 }]
  
  // 設(shè)置凍結(jié)窗格
  ws1['!freeze'] = { xSplit: 1, ySplit: 1 }
  
  // 生成文件
  XLSX.writeFile(wb, '高級導(dǎo)出.xlsx')
}

npm install exceljs

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'

async function advancedExcelJSExport() {
  const workbook = new ExcelJS.Workbook()
  workbook.creator = 'My App'
  workbook.lastModifiedBy = 'User'
  workbook.created = new Date()
  
  const worksheet = workbook.addWorksheet('高級報表')
  
  // 合并單元格
  worksheet.mergeCells('A1:D1')
  const titleRow = worksheet.getCell('A1')
  titleRow.value = '銷售報表'
  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])
    
    // 銷售額超過目標(biāo)顯示綠色
    if (item.sales > item.target) {
      row.getCell(3).fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FF00FF00' }
      }
    }
  })
  
  // 添加公式
  worksheet.addRow(['總計', '', { formula: 'SUM(C2:C3)' }, { formula: 'SUM(D2:D3)' }])
  
  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer()
  saveAs(new Blob([buffer]), '高級報表.xlsx')
}

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: '市場' }
      ],
      jsonFields: {
        '姓名': 'name',
        '年齡': 'age',
        '部門': 'department'
      }
    }
  }
}
</script>

<template>
  <download-excel
    :data="filteredData"
    :fields="{
      'ID': 'id',
      '產(chǎn)品名稱': {
        field: 'name',
        callback: (value) => `產(chǎn)品: ${value}`
      },
      '價格': {
        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: '手機', price: 2999, status: true },
        { id: 2, name: '電腦', price: 5999, status: false }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.products.filter(p => p.status)
    }
  },
  methods: {
    beforeDownload() {
      console.log('即將開始導(dǎo)出')
      // 可以在這里顯示加載狀態(tài)
    },
    afterDownload() {
      console.log('導(dǎo)出完成')
      // 可以在這里隱藏加載狀態(tài)
    }
  }
}
</script>

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
    }
  }
}

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ù)庫獲取數(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)出錯誤:', error)
    res.status(500).send('導(dǎo)出失敗')
  }
})

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

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
    })
  }
}

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()
    }
  }
}

<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)出選中項
      </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()
        
        // 模擬進度更新
        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) {
      // 簡單的CSV導(dǎo)出實現(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>

<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: '市場', 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>

const csv = '\uFEFF' + csvContent

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

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')
}

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年度銷售報表'
  titleCell.font = { bold: true, size: 16 }
  titleCell.alignment = { horizontal: 'center' }
  
  // 一級表頭
  ws.mergeCells('A2:C2')
  ws.getCell('A2').value = '銷售數(shù)據(jù)'
  ws.mergeCells('D2:E2')
  ws.getCell('D2').value = '財務(wù)數(shù)據(jù)'
  
  // 二級表頭
  ws.getCell('A3').value = '日期'
  ws.getCell('B3').value = '銷售員'
  ws.getCell('C3').value = '金額'
  ws.getCell('D3').value = '成本'
  ws.getCell('E3').value = '利潤'
  
  // 添加數(shù)據(jù)...
  
  return wb.xlsx.writeBuffer()
}