<template>
  <div>
    <!-- 下載按鈕，點(diǎn)擊觸發(fā) downloadFile 方法 -->
    <button @click="downloadFile">下載</button>
    <!-- 暫停按鈕，點(diǎn)擊觸發(fā) pauseDownload 方法 -->
    <button @click="pauseDownload" :disabled="!isDownloading || isPaused">暫停</button>
    <!-- 恢復(fù)按鈕，點(diǎn)擊觸發(fā) resumeDownload 方法 -->
    <button @click="resumeDownload" :disabled="!isPaused">恢復(fù)</button>
    <!-- 顯示下載進(jìn)度 -->
    <p>下載進(jìn)度: {{ progress }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xhr: null, // 存儲(chǔ) XMLHttpRequest 對(duì)象
      isDownloading: false, // 標(biāo)記是否正在下載
      isPaused: false, // 標(biāo)記是否暫停下載
      progress: 0, // 下載進(jìn)度百分比
      url: 'https://example.com/file.zip', // 下載文件的 URL，需要替換為實(shí)際的文件 URL
      resumeOffset: 0 // 恢復(fù)下載時(shí)的偏移量
    };
  },
  methods: {
    downloadFile() {
      // 創(chuàng)建一個(gè)新的 XMLHttpRequest 對(duì)象
      this.xhr = new XMLHttpRequest();
      // 打開(kāi)一個(gè) GET 請(qǐng)求，設(shè)置響應(yīng)類(lèi)型為 blob
      this.xhr.open('GET', this.url, true);
      this.xhr.responseType = 'blob';

      // 如果有恢復(fù)偏移量，設(shè)置請(qǐng)求頭的 Range
      if (this.resumeOffset > 0) {
        this.xhr.setRequestHeader('Range', `bytes=${this.resumeOffset}-`);
      }

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

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

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

      // 開(kāi)始發(fā)送請(qǐng)求
      this.xhr.send();
      this.isDownloading = true;
      this.isPaused = false;
    },
    pauseDownload() {
      if (this.isDownloading &&!this.isPaused) {
        // 暫停下載，終止 XMLHttpRequest 請(qǐng)求
        this.xhr.abort();
        this.isPaused = true;
        // 記錄當(dāng)前下載的偏移量
        this.resumeOffset += this.xhr.response.byteLength || 0;
      }
    },
    resumeDownload() {
      if (this.isPaused) {
        // 恢復(fù)下載，調(diào)用 downloadFile 方法
        this.downloadFile();
      }
    }
  }
};
</script>

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

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

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