当前位置：首页 > news >正文

北京商城网站设计商城网站带宽控制

news 2025/10/20 21:48:48

北京商城网站设计,商城网站带宽控制,学校asp网站,asp官网Vue Ant Design 扩展：实现表格导出进度提示功能引言在处理大数据量（10万条）表格导出时，常面临以下问题： 浏览器卡顿无响应导出进度不可见导出失败无反馈本文将深度扩展以下功能： 分片数据加载机制…

Vue + Ant Design 扩展：实现表格导出进度提示功能

引言

在处理大数据量（10万+条）表格导出时，常面临以下问题：

浏览器卡顿无响应
导出进度不可见
导出失败无反馈

本文将深度扩展以下功能：

分片数据加载机制
实时进度可视化
异常中断处理
性能优化策略

通过Ant Design Vue的Progress组件与自定义Hook，打造企业级导出体验。

一、进度提示核心原理

1.1 分片加载模型

数据总量 → 分片大小 → 当前分片 → 进度百分比↑        ↑         ↑
100,000条 5,000条/片 20次迭代

1.2 异步处理流程

二、完整实现方案

2.1 进度条组件集成

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

2.2 核心导出Hook（useExportProgress）

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 = nulllet worksheet = nullconst 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 = trueinitWorkbook()const { chunkSize, total, fetchData } = configconst 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 = falseresetState()}})}const appendData = (data) => {const startRow = worksheet['!ref'] ? worksheet['!ref'].split(':')[1].replace(/[^0-9]/g, '') + 1 : 1XLSX.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 = nullworksheet = nullprogress.value = 0}return {isExporting,progress,exportData}
}

2.3 调用示例

<script setup>
import { useExportProgress } from './hooks/useExportProgress'const { isExporting, progress, exportData } = useExportProgress()// 模拟分片数据获取
const fetchDataChunk = async (page, pageSize) => {const start = page * pageSizeconst end = start + pageSizereturn 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>

三、性能优化策略

3.1 内存管理优化

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

3.2 Web Worker方案

// worker.js
self.onmessage = async (e) => {const { config, chunkIndex } = e.dataconst data = await config.fetchData(chunkIndex, config.chunkSize)self.postMessage({ chunkIndex, data })
}// 主线程调用
const worker = new Worker('./worker.js')
worker.postMessage({ config, chunkIndex: i })

3.3 虚拟滚动优化

// 分片加载时动态创建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}`)
}

四、异常处理方案

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

4.2 错误边界处理

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