//得到浏览器版本
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. SOA服务总线设计

    背景 基于总线的设计,借鉴了计算机内部硬件组成的设计思想(通过总线传输数据).在分布式系统中,不同子系统之间需要实现相互通信和远程调用,比较直接的方式就是“点对点”的通信方式,但是这样会暴露出一些很明 ...

  2. Apple 远程推送APNS 服务

    APP注册APNS流程 http://mobiforge.com/design-development/programming-apple-push-notification-services 服务器 ...

  3. vue - webpack.dev.conf.js

    描述:开发时的配置.(配置开发时的一些操作) 例如这里,是否自动打开浏览器(默认true) 'use strict' // build/util.js const utils = require('. ...

  4. Unity3d 4.3 通过代码动态更改SpriteRender的Sprite

    http://www.unitymanual.com/home.php?mod=space&uid=2452&do=blog&id=420 using UnityEngine; ...

  5. Unity命令行模式,也能「日志实时输出」

    转自自己的简书:http://www.jianshu.com/p/bd97cb8042a9 如果你使用过Unity命令行模式(batchmode),来实现Unity自动化编译构建,你肯定会遇到过这样的 ...

  6. ant 重置(修改)DatePicker MonthPicker Cascader 的值

    1.清空值 this.props.form.resetFields(); 2.监听 props 的变化,触发 清空按钮 .

  7. Struts2入门示例

    1.导入struts2需要的9个包到lib文件夹中 2.配置web.xml文件 <?xml version="1.0" encoding="UTF-8"? ...

  8. 用Web API Client 调用 Web API

    安装Web API客户端库 右键单击项目,选择管理 NuGet程序包,选择联机选项,选择全部,在搜索框中输入“Microsoft.AspNet.WebApi.Client”, 搜索结果就是要安装的类库 ...

  9. angularJS使用内置服务

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  10. ss - float浮动模块的高度问题 解决方案

    当一个Div中的子元素都是浮动元素时,该div是没有高度的.通常会带来很多困扰,解决方案如下: 低版本统配兼容: overflow: hidden; 下面是不支持低配浏览器,而且似乎该效果对 P 标签 ...