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. Codeforces 1221F Game With String 思维题

    题意:有两个人玩游戏,游戏规则如下:有一个长度为n的字符串,这个字符串由 . 和 X 构成,Alice可以选择a个连续的 . 把它们变成X, Bob可以选择连续的b个 . 把它们变成X.题目中保证a ...

  2. web编程jsp小tips

    jsp文件头 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  3. ubuntu安装pandas

    1 安装依赖包 setuptools Numpy: 1.7.1 or higher python-dateutil: 1.5 or higher pytz: Needed for time zone ...

  4. wine安装与配置

      1. 安装wine32dpkg --add-architecture i386 && apt-get update && apt-get install wine3 ...

  5. [洛谷P1709] 隐藏的口令

    问题描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...

  6. Eclipse使用maven创建SSM-web项目

    1.环境准备 (1)maven:apache-maven-3.5.2,我的maven安装在D:\apache-maven-3.5.2,eclipse中maven配置如下: 先add ,添加好自己的ma ...

  7. 在linux中 部署 mongo 数据库服务端

    1 首先需要一台linux服务器(我用的redhat linux,其它的也大同小异), 玩一玩的话,推荐亚马逊上面去创建一个免费的linux服务器,有关具体创建linux服务器不在这赘述. https ...

  8. 【Java】java.sql.SQLDataException: Cannot determine value type from string

    报错如下: There was an unexpected error (type=Internal Server Error, status=500). Error attempting to ge ...

  9. Mybatis系列之逆向工程

    前言 正式开始前需先导入mybatis-generator-core的jar包,并且准备好数据库,表,以及Mybatis Generator官网(http://www.mybatis.org/gene ...

  10. RabbitMQ核心概念和AMQP协议(二)

    RabbitMQ是什么? RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议,在完全不同的应用之间共享数据,RabbirMQ是使用Erlang语言来编写的,并且RabbitMQ是基于A ...