需求: 前端页面拼接成的Table表格导出成Excel文件。
解决方法: 由于传送的拼接文件过大,不可能使用Get方式直接请求后台导出Excel,这篇文章使用Post表单提交方式来实现。
1.方法一:
一般情况下,我们通过ajax获取数据都是采用get方式获取,但如果ajax的请求url过长时,get方式由于浏览器对url长度不同会导致无法正常获取数据,尤其是IE。
这时候,我们需要通过post请求的方式获取数据,而如果我们需要通过post方式导出Excel表格,则需要通过表单提交的方式导出Excel。
function postExcelFile(params, url) { //params是post请求需要的参数,url是请求url地址
var form = document.createElement("form");
form.style.display = 'none';
form.action = url;
form.method = "post";
document.body.appendChild(form);
for(var key in params){
var input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = params[key];
form.appendChild(input);
}
form.submit();
form.remove();
}
//点击导出按钮导出excel表格
exportButton.onclick = function() {
var params = {};
postExcelFile(params, "http://www.XXX_excel");
}
嘿嘿,完美解决问题!如果后端返回服务器异常,则需要后台配合修改了。
链接:https://blog.csdn.net/qq_33036599/article/details/80844430
2.方法二. 采用Post请求的方式提交参数并导出excel
一般情况下,我们都是采用get请求的方式导出excel。例如采用如下方式:
var exportUrl = '/xxx;';
window.open(exportUrl);
导出excel所需的逻辑参数拼接到url上即可。
但是,如果我们需要提交大量的参数到后台才能导出excel, 亦或者我们提交的参数中有中文,get提交乱码了,那么就可能想使用post提交的方式来导出excel。因为post提交支持更多的参数,从而能解决get提交对url长度的限制问题。
然而,一般的post提交表单,意味着主页面也会一起刷新,体验较差。那么,这里将提供一个仿异步post提交导出excel的实例。
代码如下:
_export = {
canExport:false,
post:function(data,exportUrl) {
_export.canExport = true;
if ($('#exportIframe').length > 0) {
$('#exportIframe').remove();
}
$('body').append('<iframe id="exportIframe" width="0" height="0" src="'+domain+'/export"></iframe>');
$('#exportIframe').load(function() {
if (_export.canExport) {
var formData = '<form method="post" action='+exportUrl+' >';
for (var name in data) {
formData = formData + '<input type="text" name="'+name+'" value="'+data[name]+'" />';
}
formData = formData + '<input type="submit" id="submitExportForm"/>';
formData = formData + '</form>';
$(this).contents().find('body').append(formData);
$(this).contents().find('#submitExportForm').click();
_export.canExport = false;
}
});
}
}
调用方式:
_export.post(submitData,exportUrl);
注意,这里的submitData是使用jquery构建key:value的form参数对象。传入导出方法后被解析还原成form表单数据。
代码的思路就是,利用隐藏的iframe内嵌模块,在iframe内部post表单提交导出我们想要的数据,页面翻转也仅发生在iframe内部,
我们的主页面并不会发生翻转,从而达到仿异步post导出的效果。
参考链接:http://www.codedocs.net/coding/302.html
后端数据处理:
public void GreenCarSummaryExport(FormCollection collection)
{
string tbBMXXHTML = HttpUtility.UrlDecode(collection["tbBMXXHTML"]);
string tbBMXXTitle = collection["tbBMXXTitle"];
string FileTitle = collection["FileTitle"];
Dictionary<string, string> dicSheet = new Dictionary<string, string>();
dicSheet.Add(tbBMXXTitle, tbBMXXHTML);
//把HTML转换为Excel
HTMLToExcelHelper.ExportHTMLToExcel(dicSheet, FileTitle);
}
/// <summary>
/// 导出HTML为Excel文件
/// </summary>
/// <param name="dicSheet">导出内容:key是SheetName,Value是HTML代码</param>
/// <param name="fileTitle">文件名</param>
public static void ExportHTMLToExcel(Dictionary<string, string> dicSheet, string fileTitle)
{
StringBuilder sbBody = new StringBuilder();
StringBuilder sbSheet = new StringBuilder();
//定义Excel头部
sbBody.AppendFormat(
"MIME-Version: 1.0\r\n" +
"X-Document-Type: Workbook\r\n" +
"Content-Type: multipart/related; boundary=\"-=BOUNDARY_EXCEL\"\r\n\r\n" +
"---=BOUNDARY_EXCEL\r\n" +
"Content-Type: text/html; charset=\"gb2312\"\r\n\r\n" +
"<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\r\n" +
"xmlns:x=\"urn:schemas-microsoft-com:office:excel\">\r\n\r\n" +
"<head>\r\n" +
"<xml>\r\n" +
"<x:ExcelWorkbook>\r\n" +
"<x:ExcelWorksheets>\r\n");
//定义Sheet
foreach (KeyValuePair<string, string> kv in dicSheet)
{
string gid = Guid.NewGuid().ToString();
sbBody.AppendFormat("<x:ExcelWorksheet>\r\n" +
"<x:Name>{0}</x:Name>\r\n" +
"<x:WorksheetSource HRef=\"cid:{1}\"/>\r\n" +
"</x:ExcelWorksheet>\r\n"
, kv.Key
, gid);
sbSheet.AppendFormat(
"---=BOUNDARY_EXCEL\r\n" +
"Content-ID: {0}\r\n" +
"Content-Type: text/html; charset=\"gb2312\"\r\n\r\n" +
"<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\r\n" +
"xmlns:x=\"urn:schemas-microsoft-com:office:excel\">\r\n\r\n" +
"<head>\r\n" +
"<xml>\r\n" +
"<x:WorksheetOptions>\r\n" +
"<x:ProtectContents>False</x:ProtectContents>\r\n" +
"<x:ProtectObjects>False</x:ProtectObjects>\r\n" +
"<x:ProtectScenarios>False</x:ProtectScenarios>\r\n" +
"</x:WorksheetOptions>\r\n" +
"</xml>\r\n" +
"</head>\r\n" +
"<body>\r\n"
, gid);
sbSheet.Append("<table border='1'>");
sbSheet.Append(kv.Value);
sbSheet.Append("</table>");
sbSheet.Append("</body>\r\n" +
"</html>\r\n\r\n");
}
//定义Excel尾部
StringBuilder sb = new StringBuilder(sbBody.ToString());
sb.Append("</x:ExcelWorksheets>\r\n" +
"</x:ExcelWorkbook>\r\n" +
"</xml>\r\n" +
"</head>\r\n" +
"</html>\r\n\r\n");
sb.Append(sbSheet.ToString());
sb.Append("---=BOUNDARY_EXCEL--");
//导出文件
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.ClearHeaders();
HttpContext.Current.Response.Buffer = true;
bool isFireFox = false;
if (HttpContext.Current.Request.ServerVariables["http_user_agent"].ToLower().IndexOf("firefox") != -1)
{
isFireFox = true;
}
if (isFireFox)
{
HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=" + fileTitle + ".xls");
}
else
{
HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(System.Text.Encoding.UTF8.GetBytes(fileTitle)) + ".xls");
}
HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";
HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312");
HttpContext.Current.Response.Write(sb.ToString());
HttpContext.Current.Response.End();
}
参考文章:https://blog.csdn.net/weixin_33895657/article/details/93565623