Vue.js实现下载时暂停恢复下载

本文主要介绍了Vue.js实现下载时暂停恢复下载,通过使用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，需要替换为实际的文件 URL      resumeOffset: 0 // 恢复下载时的偏移量    };  },  methods: {    downloadFile() {      // 创建一个新的 XMLHttpRequest 对象      this.xhr = new XMLHttpRequest();      // 打开一个 GET 请求，设置响应类型为 blob      this.xhr.open('GET', this.url, true);      this.xhr.responseType = 'blob';      // 如果有恢复偏移量，设置请求头的 Range      if (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>

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