VUE+Axios 实时显示文件下载进度，告别漫长等待

2023-10-15 20:40:55

实时掌握文件下载进度：告别漫长等待的烦恼

文件下载是日常工作中的一项常见任务，但当遇到报表类的大文件时，漫长的等待往往让人心焦。为了解决这个问题，本文将介绍如何使用 VUE + Axios 实现文件下载进度的实时显示，让用户随时掌握下载情况，告别焦急等待。

VUE + Axios 实现文件下载进度实时显示

安装依赖项

首先，安装 VUE 和 Axios：

npm install vue
npm install axios

创建 VUE 组件

接下来，创建一个 VUE 组件来实现进度条功能：

<!-- 模板 -->
<template>
  <div>
    <button @click="downloadFile">下载文件</button>
    <div v-if="loading" class="progress-bar">
      <div class="progress-bar-fill" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>

<!-- 脚本 -->
<script>
import axios from 'axios'

export default {
  data() {
    return {
      loading: false,
      progress: 0
    }
  },
  methods: {
    downloadFile() {
      this.loading = true
      axios({
        url: 'http://example.com/file.zip',
        method: 'GET',
        responseType: 'blob'
      }).then((res) => {
        this.loading = false
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'file.zip'
        a.click()
      }).catch((err) => {
        console.error(err)
        this.loading = false
      }).onProgress((event) => {
        this.progress = Math.round((event.loaded * 100) / event.total)
      })
    }
  }
}
</script>

<!-- 样式 -->
<style>
.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #ccc;
  border-radius: 5px;
}

.progress-bar-fill {
  width: 0;
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
}
</style>

使用组件

最后，在 VUE 应用中使用该组件：

<template>
  <div>
    <download-file></download-file>
  </div>
</template>

<script>
import DownloadFile from './components/DownloadFile.vue'

export default {
  components: {
    DownloadFile
  }
}
</script>