技術標籤：vueJavaScriptvue.jsnode.jsjavascript

功能：vue，elementui更改檔名下載，下載新增el-progress進度條。

需求：公司需要下載fastdfs檔案系統檔案（通過http方式），並修改下載的檔名，ps：跨域問題通過配置nginx解決。

下載元件程式碼如下：

<template>
  <div id="download" ref="downloada">
    <el-dialog title="下載中" :visible.sync="isShow" :before-close="stopDownload"
     width="12.5%">
      <el-progress type="circle" :percentage="percentage"></el-progress>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        percentage: 0,
        dialogVisible: false,
        isShow: false,
        xhr: {}
      }
    },
    methods: {
      onload: function(url, name, type) {
        this.percentage = 0
        this.isShow = true
        //也可以下載其他格式檔案
        //if (url.indexOf("https") < 0) {
        //  url = url.replace("http:", "https:");
        //}
        url = url + "?time=" + new Date().getTime()
        if (type == 'jpg' || type == 'jpeg' || type == 'png') {
          this.ddd(url, name, type)
        } else {
          this.fileLinkToStreamDownload(url, name, type)
        }
      },
      ddd(src, name, type) {
        var canvas = document.createElement('canvas');
        canvas.setAttribute("crossOrigin", '*');
        var img = document.createElement('img');
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = src;
        let _this = this;
        img.onload = function(e) {
          canvas.width = img.width;
          canvas.height = img.height;
          var context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
          _this.downs(canvas.toDataURL(type == 'jpg' ? 'image/jpeg' : type == 'jpeg' ? 'image/jpeg' : type == 'png' ?
            'image/png' : ''), name, img)
          _this.isShow = false
        }
      },
      downs(url, name, img) {
        let a = document.createElement("a")
        let imgURL = url;
        let ua = navigator.userAgent;
        if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE核心 並且  windows系統 情況下 才執行;
          var bstr = atob(imgURL.split(',')[1])
          var n = bstr.length
          var u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          var blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, name)
        } else if (ua.indexOf("Firefox") > -1) { //火狐相容下載
          let blob = this.base64ToBlob(imgURL); //new Blob([content]);
          let evt = document.createEvent("HTMLEvents");
          evt.initEvent("click", true, true); //initEvent 不加後兩個引數在FF下會報錯  事件型別，是否冒泡，是否阻止瀏覽器的預設行為
          a.download = ' ';
          a.href = URL.createObjectURL(blob);
          a.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          })); //相容火狐
        } else { //谷歌相容下載
          img.src = imgURL;
          a.href = img.src
          //設定下載檔案的名字
          a.download = name
          //點選
          a.click()
        }
        img.onload = null; //防止一直迴圈
      },
      //base64轉blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      },
      //pdf下載
      fileLinkToStreamDownload(url, fileName, type) {
        this.xhr = new XMLHttpRequest();
        this.xhr.open('get', url, true);
        this.xhr.setRequestHeader('Content-Type', 'application/${type}');

        this.xhr.responseType = "blob";
        let _this = this;
        this.xhr.onload = function() {
          if (this.status == 200) {
            //接受二進位制檔案流
            var blob = this.response;
            let ua = navigator.userAgent;
            if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE核心 並且  windows系統 情況下 才執行;
              navigator.msSaveBlob(blob, fileName)
            } else if (ua.indexOf("Firefox") > -1) { //火狐相容下載
              _this.downloadExportFile(blob, fileName, type)
            } else { //谷歌相容下載
              _this.downloadExportFile(blob, fileName, type)
            }
          }
        }
        this.xhr.addEventListener("progress", this.progressFunction, false);
        this.xhr.send();
      },
      downloadExportFile(blob, tagFileName, fileType) {
        let downloadElement = document.createElement('a');
        let href = blob;
        if (typeof blob == 'string') {
          downloadElement.target = '_blank';
        } else {
          href = window.URL.createObjectURL(blob); //建立下載的連結
        }
        downloadElement.href = href;
        downloadElement.download = tagFileName; //下載後文件名
        this.$refs.downloada.appendChild(downloadElement);
        downloadElement.click(); //點選下載
        this.$refs.downloada.removeChild(downloadElement);

        if (typeof blob != 'string') {
          window.URL.revokeObjectURL(href); //釋放掉blob物件
        }
        this.isShow = false
      },
      //上傳進度實現方法，上傳過程中會頻繁呼叫該方法
      progressFunction(evt) {
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          let num = percentComplete * 100
          this.percentage = parseFloat(num.toFixed(2))
        }
      },
      stopDownload() {
        if (this.xhr && this.isShow == true) {
          this.$confirm('此操作將停止下載, 是否繼續?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.xhr.abort()
            this.isShow = false
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消停止下載'
            });
          });
        }
      }
    }
  }
</script>
<style lang="scss">
  #download {
    .el-progress-circle {
      height: 200px !important;
      width: 200px !important;
    }
    .el-dialog {
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: calc(100% - 30px);
      max-width: calc(100% - 30px);
    }
    .el-dialog .el-dialog__body {
      flex: 1;
      overflow: auto;
    }
  }
</style>
 

父元件呼叫程式碼：

1.html程式碼

<download ref="dl"></download>

2.js程式碼

 import download from '@/components/download'
  export default {
    components: {
      download
    },
   
    methods: {
      download: function() {
         let url='http://XXXX:8882/group1/M00/00/40/Cnd7o1_8CIGAAITLBL5QnGH9z8I834.zip'
        let name = '第二代行動式消防水帶現場檢測裝置應用視訊.zip'
        let type = 'zip'
        let vm = this
        vm.$nextTick(() => {
          vm.$refs.dl.onload(url, name, type);
        });
      }
    }
  }