vue+xlsx實現(xiàn)表格導出進度提示功能
更新時間：2025年05月27日 08:46:56 作者：^Rocky
這篇文章主要為大家詳細介紹了vue如何結合ant-design和xlsx 實現(xiàn)表格導出進度提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下
引言
在處理大數(shù)據(jù)量（10萬+條）表格導出時，常面臨以下問題：
- 瀏覽器卡頓無響應
- 導出進度不可見
- 導出失敗無反饋
本文將深度擴展以下功能：
- 分片數(shù)據(jù)加載機制
- 實時進度可視化
- 異常中斷處理
- 性能優(yōu)化策略
通過Ant Design Vue的Progress組件與自定義Hook，打造企業(yè)級導出體驗。
一、進度提示核心原理
1.1 分片加載模型
數(shù)據(jù)總量 → 分片大小 → 當前分片 → 進度百分比
↑ ↑ ↑
100,000條 5,000條/片 20次迭代
1.2 異步處理流程
二、完整實現(xiàn)方案
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 = null
let worksheet = null
const initWorkbook = () => {
workbook = XLSX.utils.book_new()
worksheet = XLSX.utils.aoa_to_sheet([])
XLSX.utils.book_append_sheet(workbook, worksheet, '大數(shù)據(jù)報表')
}
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, '大數(shù)據(jù)報表.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
}
}
2.3 調(diào)用示例
<script setup>
import { useExportProgress } from './hooks/useExportProgress'
const { isExporting, progress, exportData } = useExportProgress()
// 模擬分片數(shù)據(jù)獲取
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>
三、性能優(yōu)化策略
3.1 內(nèi)存管理優(yōu)化
// 修改appendData方法
const appendData = (data) => {
// 每次處理后釋放內(nèi)存
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.data
const data = await config.fetchData(chunkIndex, config.chunkSize)
self.postMessage({ chunkIndex, data })
}
// 主線程調(diào)用
const worker = new Worker('./worker.js')
worker.postMessage({ config, chunkIndex: i })
3.3 虛擬滾動優(yōu)化
// 分片加載時動態(tài)創(chuàng)建Worksheet
if (i === 0) {
XLSX.utils.book_append_sheet(workbook, worksheet, '數(shù)據(jù)分片1')
} else {
const newSheet = XLSX.utils.aoa_to_sheet([])
XLSX.utils.book_append_sheet(workbook, newSheet, `數(shù)據(jù)分片${i+1}`)
}
四、異常處理方案
4.1 斷點續(xù)傳實現(xiàn)
// 添加本地存儲
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)
// 發(fā)送錯誤日志到服務端
}
</script>
五、生產(chǎn)級增強建議
導出日志記錄：記錄每次導出的關鍵指標（耗時、數(shù)據(jù)量、異常）
權限校驗：在exportData方法前添加Token驗證
格式預設：預先定義單元格樣式模板
多格式支持：擴展CSV/PDF導出選項
總結
通過本文實現(xiàn)的進度提示方案，可獲得以下提升：
- 用戶體驗：實時反饋增強操作信心
- 系統(tǒng)穩(wěn)定性：分片加載降低內(nèi)存壓力
- 可維護性：Hook封裝提高代碼復用
- 錯誤可追溯：完善的異常處理機制
到此這篇關于vue+xlsx實現(xiàn)表格導出進度提示功能的文章就介紹到這了,更多相關vue表格導出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
懶加載是一種網(wǎng)頁優(yōu)化技術，也被稱為延遲加載，它的主要目的是在網(wǎng)頁加載時，只加載當前可見區(qū)域內(nèi)的內(nèi)容，而延遲加載其他不可見區(qū)域的內(nèi)容，從而提高網(wǎng)頁的加載速度和性能，這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue.JS入門教程之處理表單,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要教大家如何使用Vuex+Vue.js構建單頁應用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
如何在vue-cli中使用css-loader實現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
本篇文章主要介紹了Vue路由跳轉(zhuǎn)問題記錄詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
解決Electron?store的commit和dispatch不好用問題
這篇文章主要介紹了解決Electron?store的commit和dispatch不好用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個函數(shù)、為什么new Vue里的data可以是一個對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
element的el-form和el-table嵌套使用實現(xiàn)
本文主要介紹了element的el-form和el-table嵌套使用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01