vue下载文件进度提示

最新推荐文章于 2024-02-27 14:06:07 发布

i_am_a_div_日积月累_

最新推荐文章于 2024-02-27 14:06:07 发布

阅读量1k

点赞数

分类专栏： vue 文件图片文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/i_am_a_div/article/details/126242363

版权

vue 同时被 2 个专栏收录

104 篇文章 5 订阅

订阅专栏

文件图片

25 篇文章 1 订阅

订阅专栏

在这里插入图片描述

    downloadFj (id, index, row) {
      this.tableData2.forEach((ele, i) => {
        if (i == index) {
          ele.downLoadFlag = true
        }
      })

      var elemIF = document.createElement("iframe")
      // console.log(G_CGI_PHP.superOrder.downloadItem + '?id=' + id);
      // elemIF.src = fileMember
      elemIF.src = G_CGI_PHP.group.suzexianZipDownload + "?id=" + id
      console.log(elemIF.src)

      elemIF.style.display = "none"
      document.body.appendChild(elemIF)

      // 上方是点击就触发了实际下载 然后下方.then是知道下载好了
      axios({
        url: G_CGI_PHP.group.suzexianZipDownload + "?id=" + id,
        method: 'get',
        timeout: 300000,
        // responseType: 'blob',
        onDownloadProgress (progress) {
          // 查看下载进度 但是拿不到下载文件的总大小 只能拿到文件正在下载的大小
          console.log(progress, progress.target, progress.loaded, progress.total)
          console.log(Math.round(progress.loaded / progress.total * 100) + '%')
        }
      }).then(res => {
        this.tableData2.forEach((ele, i) => {
          if (i == index) {
            ele.downLoadFlag = false
          }
        })
        // 前端在使用axios发送网络请求时，如文件下载，无法实时获取当前已经下载的文件流，只有当后端返回全部流时，才能在浏览器右下角显示已经完成的进度。
        console.log(222, res)
        if (res.status != 200) {
          this.$message.warning(res.statusText)
        }
      }).catch(error => {
        console.log(error)
        this.tableData2.forEach((ele, i) => {
          if (i == index) {
            ele.downLoadFlag = false
          }
        })
      })
    },