//得到浏览器版本
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. Can rename table but can not truncate table

    一个表无法truncate可是能够rename,这个乍听起来认为好奇怪,以下模拟该过程. 3个session: session1运行truncate和rename操作. session2运行lock表 ...

  2. struts xml中的result的类型、全局结果集、异常mapping、继承

    例子: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     ...

  3. python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

  4. 【HTML】百度地图webAPI使用

    1.登录百度地图,创建WEB应用,设置白名单.获取该WEB应用的ak 2.在页面引入相应的js和ak 3.效果(CSS不提供): 4.实例化地图map,并给map添加相应的搜索和确定坐标事件 < ...

  5. Excel 时间格式相减

    https://jingyan.baidu.com/article/3065b3b6e8b9dabecff8a4d6.html datedif函数是excel的隐藏函数,主要用于计算日期之差,不是四舍 ...

  6. Yii Framework2.0开发教程(3)数据库mysql入门

    沿用教程(2)的代码 第一步.在本地mysql数据库中新建数据库zhyoulun 第二步.在数据库中新建表并插入若干条数据 CREATE TABLE `country` ( `code` CHAR(2 ...

  7. python-简单函数小例子 单位转换

    第一种方法def fahrenheit_converter(g): fahrenheit = g /1000 return str(fahrenheit) + 'kg' #调用函数g2kg = fah ...

  8. 程序包javax.servlet.annotation不存在

    1.错误描写叙述 [INFO] Scanning for projects... [INFO] [INFO] --------------------------------------------- ...

  9. 所需即所获:像 IDE 一样使用 vim

    所需即所获:像 IDE 一样使用 vim 转载 yangyangwithgnu@yeah.net2015-11-08 10:05:53 谢谢 捐赠:支付宝 yangyangwithgnu@yeah.n ...

  10. ArcGIS教程:将“替换为模型”工具用于多面体

    替换为模型工具出如今 3D 编辑器 工具条上的 3D 编辑器菜单中.而且仅仅适用于多面体要素.使用此命令可将所选的一个或多个要素的几何替换为磁盘中所保存的 3D 模型文件.受支持的 3D 模型类型包含 ...