exportFun(){
        let _that = this
        const instance = this.axios.create({
          onDownloadProgress: function(ProgressEvent) {
            const load = ProgressEvent.loaded;
            const total = ProgressEvent.total;
            const progress = (load / total) * 100;
            console.log(progress);
            bar.style.width=(progress) + "%";
            $("#total").html( Math.floor(progress) + "%")
            if(progress == 100){
              _that.$emit('exportDataFun',this.needData)
              _that.isDownLoad = false
            }
          } 
        });
        let ajaxUrl,fileName
        if(this.isCanClick){
          let _that =this
          _that.isCanClick = false
          instance({
            url: ajaxUrl,
            method: "post",
            data: this.needData,
            responseType: "blob" //application/octet-stream
          }).then(res => {
            const data = res.data
              let r = new FileReader()
              r.onload = function () {
                try {
                  let resData = JSON.parse(this.result)
                  console.log(resData)
                  if (resData && resData['code'] && resData['code'] != '1000') {
                    _that.$Message.info(resData.msg);
                    _that.isDownLoad = false
                  }
                } catch (err) {
                  // 兼容ie11
                  if (window.navigator.msSaveOrOpenBlob) {
                    try {
                      const blobObject = new Blob([data])
                      window.navigator.msSaveOrOpenBlob(blobObject, fileName)
                    } catch (e) {
                      console.log(e)
                    }
                    return
                  }
                  this.download(data, fileName)
                  alert('导出成功')
                }
              }
              r.readAsText(data) // FileReader的API
          }).catch(e => {
            let msg = "网络异常";
            alert(msg);
          });

axios 如何获取下载文件的进度条的更多相关文章

  1. VC下载文件显示进度条

    VC下载文件显示进度条 逗比汪星人2009-09-18上传   by Koma http://blog.csd.net/wangningyu http://download.csdn.net/deta ...

  2. VC下载文件 + 显示进度条

    在codeproject里找了许久,发现这样一个VC下载文件并显示进度条的源码,于是添加了些中文注释: 1.下载线程函数: UINT DownloadFile(LPVOID pParam) { CWn ...

  3. webclient下载文件 带进度条

    private void button1_Click(object sender, EventArgs e) { doDownload(textBox1.Text.Trim()); } private ...

  4. UrlDownloadFile, 线程下载文件, 带进度条

    unit FileDownLoadThread; interface uses Classes, SysUtils, Windows, ActiveX, UrlMon; const S_ABORT = ...

  5. libcurl开源库在Win32程序中使用下载文件显示进度条实例

    一.配置工程引用libcurl库 #define CURL_STATICLIB #include "curl/curl.h" #ifdef _DEBUG #pragma comme ...

  6. Android 下载文件 显示进度条

    加入两个权限 一个是联网,另一个是读写SD卡 <uses-permission android:name="android.permission.INTERNET">& ...

  7. Android开发(24)---安卓中实现多线程下载(带进度条和百分比)

    当我们学完java中多线程的下载后,可以将它移植到我们的安卓中来,下面是具体实现源码: DownActivity.java package com.example.downloads; import ...

  8. Asp.Net上传大文件带进度条swfupload

    Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果 一.上传效果图 1.上传前界面:图片不喜欢可以自己换 2.上传中界面:百分比显示 3.上传后返 ...

  9. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

随机推荐

  1. fork和vfork的区别

    参见百度百科API说明: fork 头文件: #include<unistd.h> #include<sys/types.h> 函数原型: pid_t fork( void); ...

  2. java连接redis5.0单机版报连接超时错误

    使用java代码测试redis5.0单机版时,报redis连接超时异常,而linux上的redis能正常访问: redis.clients.jedis.exceptions.JedisConnecti ...

  3. POJ 1502 MPI MaeIstrom ( 裸最短路 || atoi系统函数 )

    题意 : 给出 N 个点,各个点之间的路径长度用给出的下三角矩阵表示,上上角矩阵和下三角矩阵是一样的,主对角线的元素都是 0 代表自己到达自己不用花费,现在问你从 1 到 N 的最短路,矩阵的 x 代 ...

  4. 【HDOJ6646】A + B = C(模拟)

    题意 1<=a,b,c<=1e100000 思路: #include<bits/stdc++.h> using namespace std; typedef long long ...

  5. 透明的LISTVIEW

    .NET就是封装的太密了,有时很多时候让我们反而更麻烦,特别是COPY不到的时候,又不懂自已想的话,说土一点就是死路一条, 记得以前经常用一句话,C++支持,可C#他不支持啊!就这样安慰自已 其实做多 ...

  6. 第二周训练 | 搜索技术 4.3 BFS

    A - Red and Black There is a rectangular room, covered with square tiles. Each tile is colored eithe ...

  7. jpa remove

    直接使用em.remove会报错,IllegalArgumentException: Removing a detached instance 即对象处于脱管的状态,使用merge使之被session ...

  8. 关于CSS你应该知道的基础知识 - 样式应用篇

    上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...

  9. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...

  10. Jmeter从数据库中读取数据

    Jmeter从数据库中读取数据 1.测试计划中添加Mysql Jar包 2.添加线程组 3.添加 jdbc connection configuration 4.添加JDBC Request,从数据库 ...