【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>
相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作