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

Vue.js组件开发-实现下载时暂停恢复下载

news 2025/8/8 5:18:30

在 Vue 中实现下载时暂停和恢复功能，通常可以借助 XMLHttpRequest 对象来控制下载过程。XMLHttpRequest 允许在下载过程中暂停和继续请求。

实现步骤

创建 Vue 组件：创建一个 Vue 组件，包含下载、暂停和恢复按钮。
初始化 XMLHttpRequest 对象：在组件中初始化一个 XMLHttpRequest 对象，用于处理下载请求。
实现下载功能：通过 XMLHttpRequest 发起下载请求，并监听下载进度。
实现暂停功能：暂停 XMLHttpRequest 请求。
实现恢复功能：恢复 XMLHttpRequest 请求。

详细代码

<template><div><!-- 下载按钮，点击触发 downloadFile 方法 --><button @click="downloadFile">下载</button><!-- 暂停按钮，点击触发 pauseDownload 方法 --><button @click="pauseDownload" :disabled="!isDownloading || isPaused">暂停</button><!-- 恢复按钮，点击触发 resumeDownload 方法 --><button @click="resumeDownload" :disabled="!isPaused">恢复</button><!-- 显示下载进度 --><p>下载进度: {{ progress }}%</p></div>
</template><script>
export default {data() {return {xhr: null, // 存储 XMLHttpRequest 对象isDownloading: false, // 标记是否正在下载isPaused: false, // 标记是否暂停下载progress: 0, // 下载进度百分比url: 'https://example.com/file.zip', // 下载文件的 URL，需要替换为实际的文件 URLresumeOffset: 0 // 恢复下载时的偏移量};},methods: {downloadFile() {// 创建一个新的 XMLHttpRequest 对象this.xhr = new XMLHttpRequest();// 打开一个 GET 请求，设置响应类型为 blobthis.xhr.open('GET', this.url, true);this.xhr.responseType = 'blob';// 如果有恢复偏移量，设置请求头的 Rangeif (this.resumeOffset > 0) {this.xhr.setRequestHeader('Range', `bytes=${this.resumeOffset}-`);}// 监听下载进度事件this.xhr.addEventListener('progress', (event) => {if (event.lengthComputable) {// 计算下载进度百分比this.progress = Math.round((this.resumeOffset + event.loaded) / (this.resumeOffset + event.total) * 100);}});// 监听请求完成事件this.xhr.addEventListener('load', () => {this.isDownloading = false;this.isPaused = false;this.resumeOffset = 0;// 创建一个临时的 URL 对象const url = window.URL.createObjectURL(this.xhr.response);// 创建一个 <a> 元素const a = document.createElement('a');a.href = url;a.download = 'file.zip'; // 设置下载文件名// 模拟点击 <a> 元素进行下载a.click();// 释放临时 URL 对象window.URL.revokeObjectURL(url);});// 监听请求错误事件this.xhr.addEventListener('error', () => {this.isDownloading = false;this.isPaused = false;console.error('下载出错');});// 开始发送请求this.xhr.send();this.isDownloading = true;this.isPaused = false;},pauseDownload() {if (this.isDownloading &&!this.isPaused) {// 暂停下载，终止 XMLHttpRequest 请求this.xhr.abort();this.isPaused = true;// 记录当前下载的偏移量this.resumeOffset += this.xhr.response.byteLength || 0;}},resumeDownload() {if (this.isPaused) {// 恢复下载，调用 downloadFile 方法this.downloadFile();}}}
};
</script>

代码注释

代码中的注释已经详细解释了每一步的作用，以下是一些关键部分的总结：

downloadFile 方法：创建 XMLHttpRequest 对象，发起下载请求，监听下载进度和完成事件，处理下载完成后的文件保存。
pauseDownload 方法：暂停下载，终止 XMLHttpRequest 请求，并记录当前下载的偏移量。
resumeDownload 方法：恢复下载，调用 downloadFile 方法，并设置请求头的 Range 以从指定位置继续下载。

使用说明

替换文件 URL：将 data 中的 url 属性替换为实际要下载的文件的 URL。
引入组件：将上述代码保存为一个 Vue 组件（例如 DownloadComponent.vue），然后在需要使用的地方引入该组件。

<template><div><DownloadComponent /></div>
</template><script>
import DownloadComponent from './DownloadComponent.vue';export default {components: {DownloadComponent}
};
</script>