js下载Excel

现在前端一直习惯直接使用ajax做页面局部刷新，但是用它来做文件下载是不行的，因为它的响应类型没有流文件，可以通过以下方式实现：

第一种：通过get请求的方式实现下载

window.open("http:localhost:8080/v1/download/sheetdata");

这种方式就是通过get请求访问一个URL，参数都拼在url后面来实现。这种方式简单，但是每次都会瞬间打开一个新窗口，不太友好，最重要的是火狐浏览器不支持。

第二种：通过XMLHttpRequest实现下载。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

下面就是我用XMLHttpRequest实现下载的代码

function exportData(){
        var index = layer.load(2);
        var showName = "";
        $.ajax({
			url:visuUrls+"/download/getDownloadName",
			type:"GET",
			async:false,
			data:{"tableName":tableName},
			dataType:"json",
			success:function (data) {
				if(data.code==200){
				    showName=data.data;
				}
            },
			error:function () {

            }
		})
        // 判断下载文件名
		if(showName==""){
            layer.close(index);
            layer.msg('下载失败', {icon: 2});
            return;
		}
        var url = visuUrls+"/download/v1/table-data?tableName="+tableName+"&flag="+flag+"&name="+$("input[name='name']").val();
        var xhr = getHttpObj();//创建新的XHR对象
        xhr.open('post', url,true);//指定获取数据的方式和url地址
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
        xhr.responseType = 'blob';//以blob的形式接收数据，一般文件内容比较大
        xhr.onload = function(e) {
            var blob = this.response;//Blob数据
            if (this.status == 200) {
                if (blob && blob.size > 0) {
                    console.log(xhr.response)
                    var blob = new Blob([xhr.response], {type: 'Files'});
                    var csvUrl = URL.createObjectURL(blob);
                    var link = document.createElement('a');
                    link.href = csvUrl;
                    // 下载xlsx文件
                    link.download = showName+".xlsx";
                    link.click();
                }
                layer.close(index);
            }else {
                layer.close(index);
                layer.msg('下载失败', {icon: 2});
			}
        };
        xhr.send(null) //post请求传的参数
    }
    function getHttpObj() {
        var xmlhttp=null;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }

这种方式最坑的就是IE浏览器不兼容。

关于XMLHttpRequest的兼容性可以参考这篇文章：你真的会使用XMLHttpRequest吗？

第三种，通过form表单实现

var $eleForm = $("<form method='post'></form>");
$eleForm.attr("action",dbUrls+"/v1/download/sheetdata");
$eleForm.append("<input name='tableName' type='hidden' value='"+table_name+"'>");
$eleForm.append("<input name='showName' type='hidden' value='"+name_ch+"'>");
$eleForm.append("<input name='username' type='hidden' value='"+uname+"'>");
$eleForm.append("<input name='userid' type='hidden' value='"+uid+"'>");
$(document.body).append($eleForm);
//提交表单，实现下载
$eleForm.submit();
$eleForm.remove();