//得到浏览器版本
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. Redis源代码分析(五)--- sparkline微线图

    sparkline这个单词,我第一次看的时候.也不知道这什么意思啊,曾经根本没听过啊,可是这真真实实的出如今了redis的代码中了,刚刚開始以为这也是属于普通的队列嘛.就把他分在了struct包里了. ...

  2. WebDriver API——第2部分Exceptions

    Exceptions that may happen in all the webdriver code. exception selenium.common.exceptions.ElementNo ...

  3. [Swift A] - HTTP请求

    iOS开发中大部分App的网络数据交换是基于HTTP协议的.本文将简单介绍在Swift中使用HTTP进行网络请求的几种方法. 注意:网络请求完成后会获得一个NSData类型的返回数据,如果数据格式为J ...

  4. DRUPAL性能优化【转】

    1.启用memcache代替Mysql的缓存表处理缓存数据. 2.添加一个opcode缓存可以让 PHP能够重用前面编译过的代码,这样就会跳过解析和编译.常见的opcode缓存有Alternative ...

  5. (十)Unity5.0新特性------新UI系统实战

    原文 Unity New GUI Tutorial – Part 1 Unity New GUI Tutorial- Part 2 Unity New GUI Tutorial – Part 3 大家 ...

  6. jquery删除一个元素,但保留里面的元素

    删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 但是如果我想删除这个元素,但 ...

  7. HTTP协议发展历史

    一.HTTP 0.9版本 1991年发布0.9版本,只有一个 GET 命令. 例如:GET /index.html   表示浏览器只能接收返回 html 格式的字符串:服务器发送完毕就关闭tcp链接. ...

  8. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  9. FIFO、LRU、OPT页面调度算法及样例

    网上非常多介绍3种页面置换算法的样例和过程是不对的, 本文依据<操作系统概念>第七版对三种算法做介绍,并给出正确的样例以验证算法. 一.FIFO先进先出页面置换算法,创建一个FIFO队列来 ...

  10. python 安装 pyinstall 编译exe文件

    $ pip install future 安装PyInstaller之前需确认首先安装了pywin32 下载地址:http://nchc.dl.sourceforge.net/project/pywi ...