//得到浏览器版本
myJqHelp.getBrowser = function () { var ua = window.navigator.userAgent;
var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
var isFirefox = ua.indexOf("Firefox") != -;
var isOpera = window.opr != undefined;
var isChrome = ua.indexOf("Chrome") && window.chrome;
var isSafari = ua.indexOf("Safari") != - && ua.indexOf("Version") != -;
if (isIE) {
return "IE";
} else if (isFirefox) {
return "Firefox";
} else if (isOpera) {
return "Opera";
} else if (isChrome) {
return "Chrome";
} else if (isSafari) {
return "Safari";
} else {
return "Unkown";
}
}
//字节转换
myJqHelp.bConvertKBMBGB = function (limit) {
var size = "";
if (limit < 0.1 * ) { //如果小于0.1KB转化成B
size = limit.toFixed() + "B";
} else if (limit < 0.1 * * ) {//如果小于0.1MB转化成KB
size = (limit / ).toFixed() + "KB";
} else if (limit < 0.1 * * * ) { //如果小于0.1GB转化成MB
size = (limit / ( * )).toFixed() + "MB";
} else { //其他转化成GB
size = (limit / ( * * )).toFixed() + "GB";
} var sizestr = size + "";
var len = sizestr.indexOf("\.");
var dec = sizestr.substr(len + , );
if (dec == "") {//当小数点后为00时 去掉小数部分
return sizestr.substring(, len) + sizestr.substr(len + , );
}
return sizestr;
}
//加载进度条
myJqHelp.loadingProgress = function (domId) {
var mask_bg = document.createElement("div");
mask_bg.id = domId;
mask_bg.style.position = "absolute";
mask_bg.style.top = "0px";
mask_bg.style.left = "0px";
mask_bg.style.width = "100%";
mask_bg.style.height = "100%";
mask_bg.style.backgroundColor = "rgba(7, 7, 7, 0.5)";
mask_bg.style.zIndex = ;
document.body.appendChild(mask_bg); var mask_msg = document.createElement("div");
mask_msg.style.position = "absolute";
mask_msg.style.top = "35%";
mask_msg.style.left = "42%";
mask_msg.style.width = "20%";
mask_msg.style.backgroundColor = "white";
mask_msg.style.border = "#336699 1px solid";
mask_msg.style.textAlign = "center";
mask_msg.style.fontSize = "1.1em";
mask_msg.style.fontWeight = "bold";
mask_msg.style.padding = "0.5em 3em 0.5em 3em";
mask_msg.style.zIndex = ;
var progressBar = $(`<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success"
style="width: 0%;">
</div>
</div><span name='progress'>/</span>`);
progressBar.css("z-index", );
$(mask_msg).append(progressBar);
mask_bg.appendChild(mask_msg);
}
//关闭进度条
myJqHelp.closeProgress = function (domId) {
var mask_bg = document.getElementById(domId);
if (mask_bg != null)
mask_bg.parentNode.removeChild(mask_bg);
}
//excel下载带进度条
myJqHelp.excelDownLoad = function (url, progressId, fileName, type) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.responseType = "blob";
xhr.addEventListener("loadstart", function (ev) {
myJqHelp.loadingProgress(progressId);
// 开始下载事件:下载进度条的显示
$('div.progress-bar').css('width', "0%");
$("span[name='progress']").text("0/0");
});
xhr.addEventListener("progress", function (ev) {
// 下载中事件:计算下载进度
var max = ev.total;
var value = ev.loaded;
var width = value / max * ;
$('div.progress-bar').css('width', width + "%");
$("span[name='progress']").text(myJqHelp.bConvertKBMBGB(value) + "/" + myJqHelp.bConvertKBMBGB(max));
});
xhr.addEventListener("load", function (ev) {
// 下载完成事件:处理下载文件
if (type == "") {
type = "application/vnd.ms-excel";
} else {
type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
}
if (this.status == ) {
var blob = this.response;
var browser = myJqHelp.getBrowser();
if (browser == "Chrome") {
var link = document.createElement('a');
var file = new Blob([blob], { type: type });
link.href = window.URL.createObjectURL(file);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
} else if (browser == "Firefox") {
var file = new File([blob], fileName, { type: type });
var url = URL.createObjectURL(file);
parent.location.href = url;
window.URL.revokeObjectURL(url);
}
//else if (browser == "IE") {
// var file = new Blob([blob], { type: 'application/force-download' });
// window.navigator.msSaveBlob(file, fileName);
//}
}
});
xhr.addEventListener("loadend", function (ev) {
// 结束下载事件:下载进度条的关闭
myJqHelp.closeProgress(progressId);
});
xhr.addEventListener("error", function (ev) {
});
xhr.addEventListener("abort", function (ev) {
});
xhr.send();
}

基于bootstrap样式、与jq。

使用方法:

myJqHelp.excelDownLoad(url, "myProgress","orders.xls","2003");

XmLHttpRequst下载Excel的更多相关文章

  1. 360浏览器下载excel问题解决方式

    亲们有没有碰到过今天我遇到的这件事. 如果使用简单的链接.或者get方式提交的表单,去下载excel,那么360浏览器就会有问题. 问题是:它没把我用java生成的excel表格下载,而是去把我的列表 ...

  2. java的poi技术下载Excel模板上传Excel读取Excel中内容(SSM框架)

    使用到的jar包 JSP: client.jsp <%@ page language="java" contentType="text/html; charset= ...

  3. 在线读取Mongodb数据库下载EXCEL文件

    版本:Mongodb2.4.8 通过页面下载Excel文件 jsp <%@ page language="java" contentType="text/html; ...

  4. angularJS通过post方法下载excel文件

    最近工作中遇到,要使用angularJS的post方法来下载excel的情况.网上找到一个帖子:http://stackoverflow.com/questions/22447952/angularj ...

  5. asp.net 下载Excel (数据流,不保存)--客户端

    效果图: 前端页面 <html> <head> <title>Test For Excel</title> <script src="j ...

  6. Angularjs 通过WebApi 下载excel

    如果想知道 AngularJs 通过WebAPI 下载Excel.请看下文,这里仅提供了一种方案. 服务器端代码如下: protected HttpResponseMessage GenereateE ...

  7. 使用DateSet下载Excel

    这里我们使用Microsoft.Office.Interop.Excel.dll下载Excel,没有引用可点击下载 关键代码,ExcelHelper类 using System; using Syst ...

  8. 前端axios下载excel(二进制)

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...

  9. 前端axios下载excel,并解决axios返回header无法获取所有数据的问题

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...

随机推荐

  1. Android开发 之 我的jar包引用方法

    1.在工程上名上右键->Build Path ->Configure Build Path 2.在Libraries选项卡中,选择右侧的Add External JARs,然后选择要导入的 ...

  2. angular中使用promise

    promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理. 如果说是promise也是 ...

  3. python——关于Python Profilers性能分析器

    1. 介绍性能分析器 profiler是一个程序,用来描述运行时的程序性能,并且从不同方面提供统计数据加以表述.Python中含有3个模块提供这样的功能,分别是cProfile, profile和ps ...

  4. JS中confirm,prompt用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ant Table td 溢出隐藏(省略号)

    1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...

  6. PHP的CURLOPT_POSTFIELDS参数使用数组和字符串的区别

    手册上解释: CURLOPT_POSTFIELDS  全部数据使用HTTP协议中的"POST"操作来发送.要发送文件,在文件名前面加上@前缀并使用完整路径.这个参数可以通过urle ...

  7. QTP 无法识别web 大全

    说明:这里以一个登陆框为例,展示了各种方式供你选择. 假设你喜欢对象的话.也能够手动加入对象webedit. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv ...

  8. 多线程-AbstractQueuedSynchronizer(AQS)

    概述 从使用者的角度,AQS的功能可分为两类:独占功能和共享功能.它的子类中,要么实现并使用了它独占功能的API,要么使用了共享锁的功能,而不会同时使用两套API,即使是它的子类ReentrantRe ...

  9. [elk]logstash grok原理

    logstash语法 http://www.ttlsa.com/elk/elk-logstash-configuration-syntax/ https://www.elastic.co/guide/ ...

  10. [k8s]k8s api-server启动systemd参数分析

    默认2个参数就可以启动(必需) kube-apiserver \ --service-cluster-ip-range=10.254.0.0/16 \ --etcd-servers=http://19 ...