【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>
相关推荐
小小小小宇10 分钟前
PC和WebView白屏检测
前端
三原19 分钟前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
天天扭码22 分钟前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试
小矮马25 分钟前
React-组件和props
前端·javascript·react.js
懒羊羊我小弟29 分钟前
React Router v7 从入门到精通指南
前端·react.js·前端框架
DC...1 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
Mars狐狸1 小时前
AI项目改用服务端组件实现对话?包体积减小50%!
前端·react.js
H5开发新纪元1 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.3响应式革新与TypeScript高效开发实战指南》
前端·后端
恋猫de小郭2 小时前
腾讯 Kuikly 正式开源,了解一下这个基于 Kotlin 的全平台框架
android·前端·ios