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

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

实现步骤

1. 创建 Vue 组件：创建一个 Vue 组件，包含下载、暂停和恢复按钮。
2. 初始化 XMLHttpRequest 对象：在组件中初始化一个 XMLHttpRequest 对象，用于处理下载请求。
3. 实现下载功能：通过 XMLHttpRequest 发起下载请求，并监听下载进度。
4. 实现暂停功能：暂停 XMLHttpRequest 请求。
5. 实现恢复功能：恢复 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 以从指定位置继续下载。

使用说明

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

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

3. 运行项目：在浏览器中运行 Vue 项目，点击“下载”按钮开始下载文件，点击“暂停”按钮暂停下载，点击“恢复”按钮继续下载。