vue下载文件时显示进度条

1.单个下载(开始是导出按钮 下载显示进度条)

html

 <el-button @click.stop="exportReport(scope.row, scope.index)" 
    v-if="!scope.row.schedule" icon="el-icon-download"
     size="small" type="text"style="color: #409eff">导出报告
 </el-button>
 <el-progress style="width: 60px;display:inline-block;margin-left: 20px;" 
      v-else :text-inside="true" :stroke-width="20" 
       :percentage="scope.row.scheduleNumber" status="success" />

 因为接口没有返回schedule和scheduleNumber数据只是前端需要 用来判断显示 按钮还是进度条的所以就手动给数组添加响应式数据

     this.data.map((item, index) => {
        this.$set(item, 'schedule', false);
        this.$set(item, 'scheduleNumber', 0);
        return item;
      });

js部分

  exportReport(row) {
      let data=this.visible?this.selectionList:this.data
    // 自己封装的方法
      downloadGet('/api/blade-robot/siteInfo/export-template','巡检报告', this.schedule, row).then(() => {
        data.forEach((x) => {
          if (x.id === row.id) {
            x.schedule = false
          }
        })
      })
    },
    schedule(progressEvent, row) {
    // 回调的progressEvent参数里有一个progressEvent.loaded和progressEvent.total两个参数,分别意思为已下载的文件大小和总文件大小
    // 因为total一直为0,经研究发现需要后端传给我ContentLength到response里这个值才会有值
    // 然而又发现后端使用的是minio这个文件服务器,所以这个文件大小太难获取了,所以我决定不改后端,直接写死了文件大小
    setTimeout(() => {
      let data=this.visible?this.selectionList:this.data
      data.forEach((x) => {
        if (x.id === row.id) {
            x.schedule = true
            x.scheduleNumber = Math.round(progressEvent.loaded / 3715 * 100)
            if( x.schedule == true){
              setTimeout(() => {
                 x.schedule = false
              }, 2000);
            }
        }
      })
    }, 2000);
    },

 downloadGet方法

export const downloadGet = (url, filename, callback, callbackParameter)=> {
  return request({
    url:url, 
    method: 'get',
    responseType: 'blob',
    timeout: 120000,
    // 下载的实时回调,axios里的
    onDownloadProgress: (a) => {
      if (callback) {
        callback(a, callbackParameter)
      }
    }
  }).then((r) => {
  // 下面的代码就是拿到字节流后转为文件的方法,想研究的可以自行百度
    const content = r.data
    const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    }else if (typeof window.navigator.msSaveBlob !== 'undefined'){
       // IE
       let blob = new Blob([content], {type: 'application/force-download'});
      navigator.msSaveBlob(blob, filename)
    }else {
      // Firefox
      var file = new File([content], filename, {type: 'application/force-download'});
      window.open(URL.createObjectURL(file));
    }
  }).catch((r) => {
    console.error(r)
  })
}

以上就可以实现每行下载时候去显示进度条了

2.批量下载弹框

 

弹框html

<el-dialog title="批量导出巡检报告" @close="toClose"
 :close-on-click-modal="false" :visible="visible" lock-scroll append-to-body
  width="600px" :modal-append-to-body="false">
    <el-table :data="selectionList" border style="width: 100%">
    <el-table-column type="index"label="序号" width="50"></el-table-column>
    <el-table-column prop="id" label="文件名称">
      <template slot-scope="scope">
       <span>{{scope.row.id}}巡检报告</span>
      </template>
    </el-table-column>
    <el-table-column prop="scheduleNumber" label="下载进度">
      <template slot-scope="scope">
        <el-progress :percentage="scope.row.scheduleNumber"  :text-inside="true" :stroke-            
         width="20"  status="success"></el-progress>
      </template>
    </el-table-column>
  </el-table>
</el-dialog>

js

    import { deepClone } from "@/util/util";//引入深拷贝方法
    //表格选中多个
    selectionChange(list) {
      this.selectionList = deepClone(list);
    },
    //点击批量下载方法
    handleDelete() {
      if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
      }
      this.$confirm("确定将选择数据批量导出巡检报告?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      })
      .then(() => {
        this.$nextTick(() => {
          this.visible=true
          this.selectionList.forEach(item=>{
          this.exportReport(item)
        })
        });
      })
      .catch(() => {});
      },
    //关闭弹框清空选中状态
     toClose(){
      this.visible=false
      this.onLoad(this.page);
      this.$refs.crud.toggleSelection();
    },
  

深拷贝方法(不使用深拷贝的话弹框和表格进度条会冲突!!!!!)

/**
 * 对象深拷贝
 */
export const deepClone = data => {
  var type = getObjType(data)
  var obj
  if (type === 'array') {
    obj = []
  } else if (type === 'object') {
    obj = {}
  } else {
    //不再具有下一层次
    return data
  }
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]))
    }
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  }
  return obj
}

 最后就是设置导出文件的类型在上文封装下载方法中 type设置的

const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})

关于 Blob 的 content-type 的部分媒体类型 可以参照下面!!!!!

".*"="application/octet-stream"
".001"="application/x-001"
".301"="application/x-301"
".323"="text/h323"
".906"="application/x-906"
".907"="drawing/907"
".a11"="application/x-a11"
".acp"="audio/x-mei-aac"
".ai"="application/postscript"
".aif"="audio/aiff"
".aifc"="audio/aiff"
".aiff"="audio/aiff"
".anv"="application/x-anv"
".asa"="text/asa"
".asf"="video/x-ms-asf"
".asp"="text/asp"
".asx"="video/x-ms-asf"
".au"="audio/basic"
".avi"="video/avi"
".awf"="application/vnd.adobe.workflow"
".biz"="text/xml"
".bmp"="application/x-bmp"
".bot"="application/x-bot"
".c4t"="application/x-c4t"
".c90"="application/x-c90"
".cal"="application/x-cals"
".cat"="application/vnd.ms-pki.seccat"
".cdf"="application/x-netcdf"
".cdr"="application/x-cdr"
".cel"="application/x-cel"
".cer"="application/x-x509-ca-cert"
".cg4"="application/x-g4"
".cgm"="application/x-cgm"
".cit"="application/x-cit"
 
".doc"="application/msword"
".docx"="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
".rtf"="application/rtf"
".xls"="application/vnd.ms-excel application/x-excel"
".xlsx"="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
".ppt"="application/vnd.ms-powerpoint"
".pptx"="application/vnd.openxmlformats-officedocument.presentationml.presentation"
".pps"="application/vnd.ms-powerpoint"
".ppsx"="application/vnd.openxmlformats-officedocument.presentationml.slideshow"
".pdf"="application/pdf"
".swf"="application/x-shockwave-flash"
".dll"="application/x-msdownload"
".exe"="application/octet-stream"
".msi"="application/octet-stream"
".chm"="application/octet-stream"
".cab"="application/octet-stream"
".ocx"="application/octet-stream"
".rar"="application/octet-stream"
".tar"="application/x-tar"
".tgz"="application/x-compressed"
".zip"="application/x-zip-compressed"
".z"="application/x-compress"
".wav"="audio/wav"
".wma"="audio/x-ms-wma"
".wmv"="video/x-ms-wmv"
".mp3, .mp2, .mpe, .mpeg, .mpg"="audio/mpeg"
".rm"="application/vnd.rn-realmedia"
".mid, .midi, .rmi"="audio/mid"
".bmp"="image/bmp"
".gif"="image/gif"
".png"="image/png"
".tif, .tiff"="image/tiff"
".jpe, .jpeg, .jpg"="image/jpeg"
".txt"="text/plain"
".xml"="text/xml"
".html"="text/html"
".css"="text/css"
".js"="text/javascript"
".mht, .mhtml"="message/rfc822"

大概率就OK了!!!!!等待大文件联调看效果!!!!!!(其中的延时器是因为我现在测试的文件只有4kb没有进度条效果 所以出此下策 请辨别哦~~~~) 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/583506.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux第十五章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

系统思考—企业辅导咨询

从2004年、2014年到2024年&#xff0c;国九条政策的发布与变迁不仅影响了行业趋势&#xff0c;更深刻地改变了企业的风险预估和策略辅导。彼得杜鲁克曾经说过&#xff1a;“必须系统地抛弃旧知识。”这不仅是企业领导者的挑战&#xff0c;也是我们每个人的难题。难点不在于我们…

GITEE 基于OAuth2的API V5版本

为了构建更好的码云生态环境&#xff0c;我们推出了基于OAuth2的API V5版本。 API V5接口使用方式以及Url都参照GitHub&#xff0c;为了各位开发者更好的兼容已经存在的第三方应用。 API 使用条款 OSCHINA 用户是资源的拥有者&#xff0c;需尊重和保护用户的权益。不能在应用…

Spring AI 抢先体验,5 分钟玩转 Java AI 应用开发

作者&#xff1a;刘军 Spring AI 是 Spring 官方社区项目&#xff0c;旨在简化 Java AI 应用程序开发&#xff0c;让 Java 开发者像使用 Spring 开发普通应用一样开发 AI 应用。 Spring Cloud Alibaba AI 以 Spring AI 为基础&#xff0c;并在此基础上提供阿里云通义系列大模…

XY_RE复现(二)

一&#xff0c;何须相思煮余年 0x55 0x8b 0xec 0x81 0xec 0xa8 0x0 0x0 0x0 0xa1 0x0 0x40 0x41 0x0 0x33 0xc5 0x89 0x45 0xfc 0x68 0x9c 0x0 0x0 0x0 0x6a 0x0 0x8d 0x85 0x60 0xff 0xff 0xff 0x50 0xe8 0x7a 0xc 0x0 0x0 0x83 0xc4…

编译Qt6.5.3LTS版本(Mac/Windows)的mysql驱动(附带编译后的全部文件)

文章目录 0 背景1 编译过程2 福利参考 0 背景 因为项目要用到对MYSQL数据库操作&#xff0c;所以需要连接到MYSQL数据库。但是连接需要MYSQL驱动&#xff0c;但是Qt本身不自带MYSQL驱动&#xff0c;需要自行编译。网上有很多qt之前版本的mysql驱动&#xff0c;但是没有找到qt6…

SiO2杂化纳米纤维膜

SiO2杂化纳米纤维膜是一种结合了二氧化硅&#xff08;SiO2&#xff09;纳米颗粒和其他材料&#xff08;如聚合物&#xff09;的复合纳米纤维膜。这种膜材料结合了SiO2的良好性能&#xff08;如高硬度、高耐磨性、热稳定性等&#xff09;和其他材料的特性&#xff08;如柔韧性、…

【XR806开发板试用】基于XR806实现智能小车

一、实验功能&#xff1a; 1、 基于XR806实现WIFI连接路由器 2、 XR806设备创建TCP socket服务器&#xff0c;局域网内通过PC端TCP客服端连接XR806 TCP服务器进行指令控制小车运行&#xff08;指令&#xff21;&#xff1a;前进、&#xff22;&#xff1a;后退、&#xff23;&…

等保测评有那些流程?为什么要做等保

根据《网络安全法》规定&#xff0c;网络运营者应当按照国家的网络安全技术标准和要求&#xff0c;采取技术措施保障网络安全&#xff0c;避免网络安全事件的发生。而等保测评是国家对企事业单位进行信息系统安全等级评定的一项重要制度&#xff0c;通过等级测评&#xff0c;可…

五一出去玩,随身WiFi纽曼和格行,哪个更值得选择?2024随身WiFi大流量全国通用,2024随身WiFi推荐第一名

临近五一&#xff0c;有太多的朋友需要出去游玩&#xff0c;但是会面临网络差&#xff0c;流量不够用等问题&#xff0c;从而选择随身WiFi。那么有非常多的朋友就纠结了&#xff0c;作为老牌企业的格行和纽曼到底选择哪个呢&#xff1f;下面我们将会从网速、续航、售后、客户评…

鸿蒙OpenHarmony【标准系统 烧录】(基于RK3568开发板)

烧录 烧录是指将编译后的程序文件下载到芯片开发板上的动作&#xff0c;为后续的程序调试提供基础。DevEco Device Tool提供一键烧录功能&#xff0c;操作简单&#xff0c;能快捷、高效的完成程序烧录&#xff0c;提升烧录的效率。 RK3568的镜像烧录通过Windows环境进行烧录&…

齐鲁制药集团李伯涛:40年不忘初心,助推企业高质量发展

一个成功的企业&#xff0c;离不开一个思想超前的优秀引领者&#xff0c;齐鲁制药亦是如此。在过去几十年的发展中&#xff0c;在董事长李伯涛的带领下&#xff0c;齐鲁制药研发出一系列领先的药品&#xff0c;不断占据国内、国际医药市场&#xff0c;逐渐成长为具有国际影响力…

Qt QLineEdit详解

1.简介 QLineEdit是一个单行文本编辑器。 行编辑允许用户使用一组有用的编辑功能输入和编辑单行纯文本&#xff0c;包括撤消和重做、剪切和粘贴以及拖放。 通过更改行编辑的echoMode&#xff0c;它也可以用作“只写”字段&#xff0c;用于密码等输入。 文本的长度可以限制为ma…

Web 服务器解析漏洞 原理以及修复方法

漏洞名称 &#xff1a;Web服务器解析漏洞 漏洞描述&#xff1a; 服务器相关中间件存在一些解析漏洞&#xff0c;攻击者可通过上传一定格式的文件&#xff0c;被服务器的中间件进行了解析&#xff0c;这样就对系统造成一定危害。常见的服务器解析漏洞涉及的中间件有IIS&#x…

详解CCF-CSP 202312-3 树上搜索

详解CCF-CSP 202312-3 树上搜索 原题连接 202312-3 树上搜索 代码及详细注释 //一个树形结构的处理程序&#xff0c;主要用于处理一些权重相关的查询 #include <iostream> #include <vector> #include <set>//定义全局变量 //好处&#xff1a; //&#…

《DiffusionNER: Boundary Diffusion for Named Entity Recognition》

Submitted 22 May, 2023; originally announced May 2023. Comments: Accepted to ACL 2023, submission version https://github.com/tricktreat/DiffusionNER 在这里插入图片描述 问题&#xff1a; 命名实体识别任务中存在的噪声跨度&#xff08;边界不清晰&#xff09…

MS17-010---利用“永恒之蓝”漏洞攻击 win7主机

免责声明:本文仅做技术交流与学习.... 目录 一.前置知识 1.何为永恒之蓝&#xff1f; 2.什么是SMB协议&#xff1f; 3.SMB工作原理是什么&#xff1f; 二、实验环境 三、实验步骤 nmap扫描 msf一把梭哈 shell执行命令 远程连接 一&#xff0e; 二&#xff0e; 一.前…

数字化转型新篇章:企业通往智能化的新范式

早在十多年前&#xff0c;一些具有前瞻视野的企业以实现“数字化”为目标启动转型实践。但时至今日&#xff0c;可以说尚无几家企业能够在真正意义上实现“数字化”。 在实现“数字化”的征途上&#xff0c;人们发现&#xff0c;努力愈进&#xff0c;仿佛终点愈远。究其原因&a…

大象机器人开源协作机械臂myCobot 630 全面升级!

1. 开篇概述 在快速发展的机器人技术领域中&#xff0c;Elephant Robotics的myCobot 600已经证明了其在教育、科研和轻工业领域的显著适用性。作为一款具备六自由度的机械臂&#xff0c;myCobot 600以其600mm的工作半径和2kg的末端负载能力&#xff0c;满足了多样化的操作需求。…

VUE的生命周期图和各函数

函数 beforeCreate(){ }, created(){ }, beforeMount(){ }, mounted(){ }, beforeUpdate(){ }, updated(){ }, beforeDestroy(){ }, destroyed(){ } 创建时生命周期图 运行时生命周期图