vue/js實現檔案流下載,檔案下載進度監聽

江湖人稱波哥發表於2020-10-30
	/**
     * 文件下載(通過文件請求,直接下載文件)
     * url 請求路徑
     * fileName 下載名稱
     * size 檔案大小
     */
    loadDown (url, fileName, size) {
      var _this = this
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true) // 也可以使用POST方式,根據介面
      xhr.responseType = 'blob'
      xhr.onprogress = function (event) {
         // 用於監聽下載進度,需要知道檔案大小
         if (event.loaded === size) {
           _this.downloadLoading = false
         }        
      }
      xhr.onload = function () {
        if (this.status === 200) {
          var content = this.response
          var aTag = document.createElement('a')
          var blob = new Blob([content])
          aTag.download = fileName
          aTag.href = URL.createObjectURL(blob)
          aTag.click()
          URL.revokeObjectURL(blob)
        }
      }
      xhr.send()
    }
    /**
    *request請求,獲取檔案地址
    */
     async handlePreview (file) {
      var _this = this
      var xhr = new XMLHttpRequest()// 第一步:新建物件
      xhr.open('GET', file.url, true)// 第二步:開啟連線  將請求引數寫在url中
      xhr.send()// 第三步:傳送請求  將請求引數寫在URL中
      /**
         * 獲取資料後的處理程式
         */
      xhr.onreadystatechange = function (res) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var str = xhr.responseText// 獲取到json字串,解析
          str = JSON.parse(str)        
          _this.loadDown(str.d, file.name)
        }
      }
    },

相關文章