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. Redis分布式锁【实战】

    概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个分布式系统都无法同时满足一致性(Consistency).可 ...

  2. Flutter-TextField初始化值和選中取值

    import 'package:flutter/material.dart'; class PersonalCenterInformationScreen extends StatefulWidget ...

  3. Java中的Overload和Override有什么区别

    Overload和Override的区别 1.Overload 定义 Overload是重载的意思.它是指我们可以定义一些名称相同的方法,通过定义不同的输入参数来区分这些方法,然后在调用时,虚拟机就会 ...

  4. UE4开发PSVR游戏的常见问题

    Failed to connect to file server at xxx.xxx.xxx.xxx. RETRYING in 5s解决办法:PS4 Devkit 中 Settings->De ...

  5. field.getModifiers() 返回值

    field.getModifiers() 返回值 public static final  的值是 25 private 的值是2  测试如下 Class clazz=MyModel.class; F ...

  6. ICMP(Internet Control Message Protocol)网际控制报文协议初识

    ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制消息.控制消息是指网 ...

  7. SQL SERVER 2012文件表(FILETABLE)新体验之一

    SQLSERVER 2012 文件表功能很COOL,让我们体验一下吧. 1,创建数据库 [sql] DREATE DATABASE FileTableTest ON  PRIMARY (     NA ...

  8. mysql 之 frm+ibd文件还原data

      此方法只适合innodb_file_per_table          = 1 当误删除ibdata 该怎么办? 如下步骤即可恢复: 1.准备工作 1)准备一台纯洁的mysql环境[从启动到现在 ...

  9. 【黑科技】花几分钟和孩子动手DIY,即可用手机完成全息影像!

    http://baobao.sohu.com/20160902/n467277059.shtml [黑科技]花几分钟和孩子动手DIY,即可用手机完成全息影像! 杭州亲子圈2016-09-02 07:2 ...

  10. Delphi 文件转换Base64

    uses EncdDecd; function FileToBase64(FileName: string): string; var  MemoryStream: TMemoryStream;beg ...