文件下载通用方式

1.vue 组件

<template>
  <!-- 附件下载 进度条 -->
  <el-dialog title="正在下载文件..." :visible.sync="filesDownProcessDialog" class="filesDownProcessDialog height-100 flex-col row-center col-center" :close-on-click-modal="false"
             :close-on-press-escape="false" :show-close="false" width="500px" :modal="false"
  >
    <!-- 下载进度条 -->
    <div class="down-process-box" v-if="filesDownProgress > 0">
      <el-progress :percentage="filesDownProgress" :stroke-width="25" :text-inside="true" text-color="#fff" status="success"></el-progress>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      filesDownProgress: 0,
      filesDownProcessDialog: false // 进度条 弹框
    }
  },
  created() { },

  methods: {
    /**
     * @description: 下载附件 开始操作
     * @author: 张佳敏
     * @param {*} row 当前 附件数据
     * @return {*}
     */
    filesDownProgresHandle(row) {
      var url = ''
      // 本地测试需转换 线上域名 方可下载
      // var httpsUrl = 'https://fanyi.baidu.com/'
      // if (url.includes('https://localhost:8081/')) {
      //   url = url.replace('https://localhost:8081/', httpsUrl)
      // }
      var annexName = row.annexName ? row.annexName : row.name
      var path = row.annexPath ? row.annexPath : row.url

      // row.annexName = '2024063.png'
      // url = 'https://fanyi.baidu.com//2024063.png'

      const xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      // 监听下载进度
      xhr.onprogress = (event) => {
        if (event.lengthComputable) {
          this.filesDownProgress = Math.floor((event.loaded / event.total) * 100)
        }
      }
      // 下载完成
      xhr.onload = () => {
        if (xhr.status === 200) {
          const blob = xhr.response
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = annexName
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          // 下载附件 完成后的操作
          this.filesDownProgresOperationFun('下载成功')
        }
      }
      // 错误处理
      xhr.onerror = () => {
        // 下载附件 完成后的操作
        this.filesDownProgresOperationFun('下载失败')
      }
      xhr.send()
    },
    /**
     * @description: 下载附件 完成后的操作
     * @author: 张佳敏
     * @param {*} type 数组格式
     * @return {*}
     */
    filesDownProgresOperationFun(customizeAltMsg) {
      this.msgSuccess(customizeAltMsg)
      setTimeout(() => {
        this.filesDownProgress = 0 // 重置进度条
        this.filesDownProcessDialog = false
      }, 200)
    }
  }
}
</script>

2.父级调用子集

// 下载文件
    downLoadFileFun(row) {
      this.$nextTick(() => {
        this.$refs['fileDownProgress'].filesDownProcessDialog = true
        this.$refs['fileDownProgress'].filesDownProgresHandle(row)
      })
    }

3.组件css文件

// 附件下载 进度弹窗
.filesDownProcessDialog{
  z-index: 2000 !important;
  text-align: left !important;
  background: rgba(0, 0, 0, 0.5);
  .el-dialog {
    height: auto;
  }
  .el-dialog__body {
    padding: 10px 20px 10px !important;
    .down-process-box {
      padding: 10px 20px;
    }
  }
}