//得到浏览器版本
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. 使用 ssh 从 Gerrit 获取 patch 信息

    使用命令行(ssh)对Gerrit进行查询, 官方地址:https://review.openstack.org/Documentation/cmd-query.html 程序例子 import os ...

  2. 算法笔记_091:蓝桥杯练习 递推求值(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 已知递推公式: F(n, 1)=F(n-1, 2) + 2F(n-3, 1) + 5, F(n, 2)=F(n-1, 1) + 3F(n- ...

  3. activeMq发送消息流程

    1,发送消息入口 Message message = messageBean.getMessageCreator().createMessage(session); producer.send(mes ...

  4. 【VBA编程】13.Workbook对象的事件

    Workbook事件用于响应对Workbook对象所进行的操作. [BeforeClose事件] BforeClose事件用于响应窗口关闭的操作 在工程资源器中,双击“ThisWorkbook”对象, ...

  5. eclipse下的tomcat内存设置大小(转)

    步骤: 1.点击Run 2.选择Run Configurations, 3.系统弹出设置tomcat配置页面,在Argument中末尾添加参数中的VM arguments中追加: -Xms256M - ...

  6. Drupal如何解析主题继承关系?

    Drupal中,主题是可以继承的,或者说是扩展.例如,要创建一个新的名为custom的主题,该主题与名为default的主题只有某些细小的差别.这个时候,不需要复制一份default到custom,可 ...

  7. Specification模式的一个不错的示例代码

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Specifi ...

  8. pandas drop_duplicates

    函数 : DataFrame.drop_duplicates(subset=None, keep='first', inplace=False) 参数:这个drop_duplicate方法是对Data ...

  9. rpm | yum 安装软件包时key过期

    1.问题: yum -y install docker-io Loaded plugins: fastestmirror, refresh-packagekit, security Setting u ...

  10. javascript和html中unicode编码和字符转义的详解

    1.html中的转义:在html中如果遇到转义字符(如“ ”),不管你的页面字符编码是utf-8亦或者是GB2312,都会直接打印成相应的字符:而当遇到(如:“\u8981”[此处的8981是16进制 ...