vue

  <div>
    <!-- 进度条 -->
    </p>

<pre><code><!-- 导出按钮 -->
<el-button @click="handleExport">导出Excel</el-button>

import axios from 'axios'

export default {
data() {
return {
progress: 0 // 初始化进度为0
}
},
methods: {
async handleExport() {
try {
const response = await axios({
url: '/api/export',
method: 'GET',
responseType: 'blob', // 指定返回类型为二进制流
onDownloadProgress: (progressEvent) => {
// 计算并更新进度
this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
}
})

// 下载完成后重置进度条
this.progress = 100

// 创建文件链接进行下载
const link = document.createElement('a')
link.href = URL.createObjectURL(response.data)
link.download = 'data.xlsx'
link.click()

} catch (error) {
console.error('导出失败:', error)
this.$message.error('导出失败，请稍后再试')
} finally {
setTimeout(() => { this.progress = 0 }, 3000) // 3秒后重置进度条
}
}
}
}

方案二：使用Blob和FileSaver.js

如果需要更完善的文件保存功能，可以引入file-saver库：

bash
npm install file-saver


javascript
import { saveAs } from 'file-saver'</p>

<p>// 在handleExport方法中替换创建链接的部分为：
saveAs(blob, 'data.xlsx') // blob为response.data

这种方式不仅支持浏览器兼容性更好，还能避免某些浏览器对a标签下载方式的限制。

注意事项

1. 确保服务器端正确设置了响应头Content-Disposition以指定文件名
2. 对于大文件导出，建议在服务端实现分片下载以提高效率
3. 需要根据实际情况调整进度条样式及动画效果
4. 考虑添加取消按钮，在用户主动终止时中断下载

以上就是在ElementUI项目中实现导出进度条功能的方法，希望对大家有所帮助！