Vue.js實現(xiàn)下載時暫?；謴拖螺d

更新時間：2025年01月31日 09:58:57 作者：LCG元

本文主要介紹了Vue.js實現(xiàn)下載時暫停恢復下載,通過使用XMLHttpRequest對象來控制下載過程,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧

實現(xiàn)步驟

創(chuàng)建 Vue 組件：創(chuàng)建一個 Vue 組件，包含下載、暫停和恢復按鈕。
初始化 XMLHttpRequest 對象：在組件中初始化一個 XMLHttpRequest 對象，用于處理下載請求。
實現(xiàn)下載功能：通過 XMLHttpRequest 發(fā)起下載請求，并監(jiān)聽下載進度。
實現(xiàn)暫停功能：暫停 XMLHttpRequest 請求。
實現(xiàn)恢復功能：恢復 XMLHttpRequest 請求。

詳細代碼

<template>
  <div>
    <!-- 下載按鈕，點擊觸發(fā) downloadFile 方法 -->
    <button @click="downloadFile">下載</button>
    <!-- 暫停按鈕，點擊觸發(fā) pauseDownload 方法 -->
    <button @click="pauseDownload" :disabled="!isDownloading || isPaused">暫停</button>
    <!-- 恢復按鈕，點擊觸發(fā) 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() {
      // 創(chuàng)建一個新的 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}-`);
      }

      // 監(jiān)聽下載進度事件
      this.xhr.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          // 計算下載進度百分比
          this.progress = Math.round((this.resumeOffset + event.loaded) / (this.resumeOffset + event.total) * 100);
        }
      });

      // 監(jiān)聽請求完成事件
      this.xhr.addEventListener('load', () => {
        this.isDownloading = false;
        this.isPaused = false;
        this.resumeOffset = 0;
        // 創(chuàng)建一個臨時的 URL 對象
        const url = window.URL.createObjectURL(this.xhr.response);
        // 創(chuàng)建一個 <a> 元素
        const a = document.createElement('a');
        a.href = url;
        a.download = 'file.zip'; // 設置下載文件名
        // 模擬點擊 <a> 元素進行下載
        a.click();
        // 釋放臨時 URL 對象
        window.URL.revokeObjectURL(url);
      });

      // 監(jiān)聽請求錯誤事件
      this.xhr.addEventListener('error', () => {
        this.isDownloading = false;
        this.isPaused = false;
        console.error('下載出錯');
      });

      // 開始發(fā)送請求
      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) {
        // 恢復下載，調(diào)用 downloadFile 方法
        this.downloadFile();
      }
    }
  }
};
</script>

代碼注釋

代碼中的注釋已經(jīng)詳細解釋了每一步的作用，以下是一些關(guān)鍵部分的總結(jié)：

downloadFile 方法：創(chuàng)建 XMLHttpRequest 對象，發(fā)起下載請求，監(jiān)聽下載進度和完成事件，處理下載完成后的文件保存。
pauseDownload 方法：暫停下載，終止 XMLHttpRequest 請求，并記錄當前下載的偏移量。
resumeDownload 方法：恢復下載，調(diào)用 downloadFile 方法，并設置請求頭的 Range 以從指定位置繼續(xù)下載。

使用說明

替換文件 URL：將 data 中的 url 屬性替換為實際要下載的文件的 URL。
引入組件：將上述代碼保存為一個 Vue 組件（例如 DownloadComponent.vue），然后在需要使用的地方引入該組件。

<template>
  <div>
    <DownloadComponent />
  </div>
</template>

<script>
import DownloadComponent from './DownloadComponent.vue';

export default {
  components: {
    DownloadComponent
  }
};
</script>