jquery实现向服务器发送get请求下载excel文件

注意:如果该请求查询数据需要较多时间,前端需要做显示上的优化,提高用户体验性,这篇文章主要是为了解决该问题。

额外话题:本来我是用了a标签特有的download属性来直接请求get请求,这样也能实现下载excel,但无法监听到get请求何时完成,所以我使用了以下的方法来实现下载功能。此外:除了a标签以外,form表单提交submit()也能下载文件,但同样无法监听到请求何时完成。经试验$.ajax{....的方式无法实现下载文件。(如果大家发现了下载文件的好方法,欢迎留言 ^_^,如果我有什么地方不对的,欢迎指正 ^_^)。

引入了插件:jquery.fileDownload.js

使用方式:<script>引入:https://cdn.bootcss.com/jquery.fileDownload/1.4.2/jquery.fileDownload.js

官网地址:https://www.bootcdn.cn/jquery.fileDownload/

前端html代码:

<div id="ExcelOperate" class="excelBtn">
   <button type="button" id="ExcelBtn" class="btn btn-primary">导出Excel</button>
   <a href=""  id="ExcelBtnlink" download="data">导出Excel</a>
   <span id="excelNote"></span>
</div>

jquery代码:

var encodeParam = function(json) {
	var tmps = [];
	for ( var key in json) {
		tmps.push(key + '=' + json[key]);
	}
	return tmps.join('&');
}
var params = {
	industryId : $('#selectIndustry').val(),
	companyid : $('#company').val(),
	provincename : $('#province').val(),
	cityname: $('#city').val(),
	countyname:$('#county').val()
};
var url=urlPrefix+'/platsafeIndex/ExcelPersondata?'+encodeParam(params);	
$.fileDownload(url,{
    httpMethod: 'get',
    prepareCallback:function(url){
       $('#ExcelBtn').text('Excel准备中...')
    },
    successCallback:function(url){
       $('#ExcelBtn').text('导出Excel')
    },
   failCallback: function (html, url) {
      $('#ExcelBtn').text('导出Excel')
   }
});

后台需注意:在get请求中需添加以下代码:

response.setHeader("Set-Cookie", "fileDownload=true; path=/");

示例如下:

猜你喜欢

转载自blog.csdn.net/tt18473481961/article/details/85108653