【VUE+ElementUI】通过接口下载blob流文件设置全局Loading加载进度

下载Blob流文件,并以服务形式显示文件下载进度

1、下载接口 增加 config参数,并用...config将该属性加入到请求中;

xxapi.js文件中设置downloadFile下载接口

javascript 复制代码
// 下载文件
export function downloadFile(data, config) {
  return request({
    url: '/xx/downloadFile',
    method: 'post',
    data: data,
    responseType: 'blob',
    timeout: 120 * 60 * 1000,
    ...config
  })
}

2、在页面中添加以下代码

html 复制代码
<el-button type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下载</el-button>
javascript 复制代码
<script>
import { downloadFile } from "@/api/xxapi";
import { Loading } from 'element-ui'
let downloadLoadingInstance;

export default {
  name: "DownloadFile",
  data() {
    return {
      downloadProgress: 0
    }
  },
  methods: {
    handleDownload(row) {
      var that = this;
      downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候 " + that.downloadProgress + '%', spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
      const config = {
        onDownloadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            that.downloadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            downloadLoadingInstance.text = "正在下载数据,请稍候 " + that.downloadProgress + '%';
          }
        }
      };
      // 从后端请求到 二进制数据,并由后端转成blob
      downloadFile({ url: row.url }, config).then((response) => {
        let downloadName = `${row.fileName}`;
        this.downloadBlob(response, downloadName); // 二进制流直接取response
        downloadLoadingInstance.close(); // 关闭加载loading效果
      });
    },
    // 下载文件流格式的文件
    downloadBlob(response, downloadName) {
      let blob = new Blob([response], {
        type: "application/json;charset=utf-8",
      });
      let href = window.URL.createObjectURL(blob); // 创建下载的链接
      if (window.navigator.msSaveBlob) {
        try {
          window.navigator.msSaveBlob(blob, downloadName);
        } catch (e) {
          console.log(e);
        }
      } else {
        // 谷歌浏览器 创建a标签 添加download属性下载
        let downloadElement = document.createElement("a");
        downloadElement.href = href;
        downloadElement.target = "_blank";
        downloadElement.download = downloadName; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      }
    }
  }
}
</script>
相关推荐
爱因斯坦乐2 分钟前
【HTML】纯前端网页小游戏-戳破彩泡
前端·javascript·html
恋猫de小郭7 分钟前
注意,暂时不要升级 MacOS ,Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝
android·前端·flutter
大莲芒4 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木6 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning217 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一7 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla7 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡7 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu8 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c8 小时前
前端表单输入框验证
前端·javascript·jquery