vue專案下載檔案，重新命名，監測進度。

張旭超發表於2021-11-23
Vue

摘要：當後臺返回一個檔案地址給前端，需要前端下載並重新命名，展示下載進度。
使用技術：ajax、blob、vue外掛file-saver

1、外掛

我們不做過多解釋，我們這裡只是使用，這是外掛教程地址：http://vuejscomponent.com/pac...

2、專案程式碼

import FileSaver from 'file-saver'
// URL：檔案存放地址，fileName：儲存檔名稱，downloadType：儲存檔案格式
const singleFileDownload = (url, fileName, downloadType) => {
  return new Promise((resolve, reject) => {
    if (!url || !fileName) {
      reject('檔案不存在')
      return
    }
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    // 當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
    // 每當 readyState 改變時，就會觸發 onreadystatechange 事件。
    // onreadystatechange儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
    // readyState
    // 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
    // 0: 請求未初始化
    // 1: 伺服器連線已建立
    // 2: 請求已接收
    // 3: 請求處理中
    // 4: 請求已完成，且響應已就緒
    // 用true時，表示傳送非同步請求，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函式：
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 0) {
          let file = null
          if (downloadType === 'pdf') {
            file = new Blob([xhr.response], { type: "application/pdf" });
          } else {
            file = new Blob([xhr.response], { type: "application/zip" });
          }
          FileSaver.saveAs(file, fileName)
          resolve('下載成功')
        } else {
          reject(new Error(fileName + '下載失敗'), null)
        }
      }
    }
    xhr.addEventListener('progress', (e) => {
      // e.total就是檔案的總位元組 e.loaded就是檔案已載入了多少位元組了
      // downloadFile.progress = (e.loaded * 1.0 / e.total * 100).toFixed(2) + '%'
      // downloadFile.progress = (e.loaded / (1024 * 1024)).toFixed(2) + 'M/' + (e.total / (1024 * 1024)).toFixed(2) + 'M'
    })
    xhr.send()
  })
}

相關文章