vue+xlsx实现表格导出进度提示功能

<template>
  <a-modal v-model:open="exportVisible" :footer="null">
    <a-progress :percent="progress" status="active" />
    <div style="margin-top: 16px">
      {{ progress }}% 完成 | 当前处理：{{ currentChunk }} / {{ totalChunks }} 分片
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'

const exportVisible = ref(false)
const progress = ref(0)
const currentChunk = ref(0)
const totalChunks = ref(0)
</script>

import { ref } from 'vue'
import * as XLSX from 'xlsx/xlsx.mjs'
import { saveAs } from 'file-saver'

export const useExportProgress = () => {
  const isExporting = ref(false)
  const progress = ref(0)
  let workbook = null
  let worksheet = null

  const initWorkbook = () => {
    workbook = XLSX.utils.book_new()
    worksheet = XLSX.utils.aoa_to_sheet([])
    XLSX.utils.book_append_sheet(workbook, worksheet, '大数据报表')
  }

  const exportData = async (config) => {
    return new Promise(async (resolve, reject) => {
      try {
        isExporting.value = true
        initWorkbook()
        const { chunkSize, total, fetchData } = config
        const totalChunks = Math.ceil(total / chunkSize)
        
        for (let i = 0; i < totalChunks; i++) {
          const data = await fetchData(i, chunkSize)
          appendData(data)
          updateProgress(i, totalChunks)
        }

        const blob = generateFile()
        saveAs(blob, '大数据报表.xlsx')
        resolve()
      } catch (error) {
        reject(error)
      } finally {
        isExporting.value = false
        resetState()
      }
    })
  }

  const appendData = (data) => {
    const startRow = worksheet['!ref'] 
      ? worksheet['!ref'].split(':')[1].replace(/[^0-9]/g, '') + 1 
      : 1
    
    XLSX.utils.sheet_add_json(worksheet, data, {
      origin: startRow,
      skipHeader: true
    })
  }

  const updateProgress = (current, total) => {
    progress.value = Math.round((current / total) * 100)
  }

  const generateFile = () => {
    return new Blob([XLSX.write(workbook, {
      bookType: 'xlsx',
      type: 'array'
    })], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
  }

  const resetState = () => {
    workbook = null
    worksheet = null
    progress.value = 0
  }

  return {
    isExporting,
    progress,
    exportData
  }
}

<script setup>
import { useExportProgress } from './hooks/useExportProgress'

const { isExporting, progress, exportData } = useExportProgress()

// 模拟分片数据获取
const fetchDataChunk = async (page, pageSize) => {
  const start = page * pageSize
  const end = start + pageSize
  return new Promise(resolve => {
    setTimeout(() => {
      const mockData = Array.from({ length: pageSize }, (_, i) => ({
        id: start + i + 1,
        value: Math.random().toFixed(4)
      }))
      resolve(mockData)
    }, 50)
  })
}

const handleExport = async () => {
  try {
    await exportData({
      chunkSize: 5000,
      total: 100000,
      fetchData: fetchDataChunk
    })
  } catch (error) {
    console.error('导出失败:', error)
  }
}
</script>

// 修改appendData方法
const appendData = (data) => {
  // 每次处理后释放内存
  const tempData = [...data]
  XLSX.utils.sheet_add_json(worksheet, tempData, {
    origin: -1,
    skipHeader: true
  })
  tempData.length = 0 // 手动GC
}

// worker.js
self.onmessage = async (e) => {
  const { config, chunkIndex } = e.data
  const data = await config.fetchData(chunkIndex, config.chunkSize)
  self.postMessage({ chunkIndex, data })
}

// 主线程调用
const worker = new Worker('./worker.js')
worker.postMessage({ config, chunkIndex: i })

// 分片加载时动态创建Worksheet
if (i === 0) {
  XLSX.utils.book_append_sheet(workbook, worksheet, '数据分片1')
} else {
  const newSheet = XLSX.utils.aoa_to_sheet([])
  XLSX.utils.book_append_sheet(workbook, newSheet, `数据分片${i+1}`)
}

// 添加本地存储
const saveProgress = (current) => {
  localStorage.setItem('exportProgress', JSON.stringify({
    currentChunk: current,
    timestamp: Date.now()
  }))
}

​​​​​​​// 启动时检查
const checkResume = () => {
  const saved = localStorage.getItem('exportProgress')
  if (saved && Date.now() - saved.timestamp < 300000) {
    return JSON.parse(saved).currentChunk
  }
  return 0
}

<template>
  <ErrorBoundary @error="handleError">
    <YourExportComponent />
  </ErrorBoundary>
</template>

<script setup>
const handleError = (error) => {
  console.error('捕获到导出错误:', error)
  // 发送错误日志到服务端
}
</script>