vue 下载进度条代码

以下是一个简单的 Vue.js 下载进度条代码示例：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    downloadFile() {
      const url = 'http://example.com/file.pdf';
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';

      xhr.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          this.progress = (event.loaded / event.total) * 100;
        }
      });

      xhr.onload = (event) => {
        const blob = xhr.response;
        const a = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'file.pdf';
        a.click();
        window.URL.revokeObjectURL(url);
      };

      xhr.send();
    },
  },
};
</script>

<style>
.progress-bar {
  height: 5px;
  background-color: #ccc;
}
</style>

在这个示例中，我们使用 XMLHttpRequest 对象来下载文件，并使用 `progress` 事件来更新 `progress` 数据并在页面上显示下载进度条。一旦文件下载完成，我们创建一个 `a` 标签并使用 `URL.createObjectURL()` 方法来生成一个 URL，然后使用 `a.click()` 方法触发下载操作。最后，我们使用 `URL.revokeObjectURL()` 方法来释放 URL 对象。