将 Ajax 数据网格导出到 Excel 文件

引言

在这部分，我将演示如何将 Ajax datagrid 导出到 Excel。

背景

两年前，我发布了另一篇文章 “将数据导出到 Excel 文件的通用方法”。 在那篇文章中，我讨论了如何使用通用方法导出数据到 Excel，当 datagrid 通过 Ajax 调用生成时。 它提供了一个通用方法，该方法使用结果进行对象映射，并创建 Excel 以发送回客户端。 与人们通常在正常的 ASP.NET datagrid 或 gridview 中所做的那样，他们会重新生成控件或将网格控件发布回服务器以生成报告。 这种方法可以节省网络流量，但会打扰服务器再次执行查询。

现在我有一个问题，如果某个查询很重，我们应该避免再次访问数据库。 那么如何将 Ajax 网格发布回服务器而不使用 viewstate 并创建报告，我将在下面展示，它也使用了我在 第 1 部分 中显示的部分技术。

分步指南

步骤 1（在客户端 JS 文件中）

将网格转换为 JSON 格式数组并发布回服务器。

为什么不直接将表发送回服务器？ 因为 HTML 表很重，它包含太多的 HTML 标签和样式，还包含我们不想导出的其他内容。
这是客户端 JS 文件中需要的代码

//an array contains prototype method
Array.prototype.contains=function(val){for(i in this)
{if(this[i]==val)return true;}return false;}

//convert table to JSON array
function getTb(){
var hideIdx=[];
//filter those columns won't be exported, all those columns are defined 
//in the table column header by class or id. TB is table id.
$('#'+TB+' tr:eq(0) .hideCol,#checkCol,#imgCol').each(function()
	{hideIdx.push($(this)[0].cellIndex);});
var tbA=trA=[];
$('#'+TB+' tr').each(function(i,tr){
trA=[];
$('td',tr).each(function(i,td){if(!hideIdx.contains
	($(td)[0].cellIndex))trA.push($(td).text());});
tbA.push(trA);
});
//create a object which has JSON array convert from table
return{tb:JSON.stringify(tbA)};
}

//post the JSON array back to page
function post(url,params){
var F=$(document.createElement('form')).attr
	({'method':'POST','action':url}).hide().appendTo('body');
for(var x in params){$(document.createElement('textarea')).attr
	({'name':x,'value':params[x]}).appendTo(F);}
F.submit();
}

//an event fire post table back and invoke 'exportExcel' by name
function ExcelExport(){post(ajaxPath()+'exportExcel',getTb());}

//code below are in the Jpage that demo in part 1.
function ajaxPath(){return (pgUrl+
	((-1<pgUrl.indexOf('?'))?'&':'?')+'Rand='+new Date().getTime()+'&Ajax=');}
var pgUrl=document.location.href;

步骤 2（在服务器端 C# 中）

将 JSON 数组转换回 HTML 格式返回。
在服务器端，它将被处理为 Ajax 调用并调用 exportExcel，就像我在第 1 部分中演示的那样，exportExcel 将数组转换为 MIME 类型为“application/vnd.ms-excel”的 HTML 格式表，直接发送回客户端。

protect void exportExcel() {
	string tb=Param("tb");
	if (null == tb) {
		...handle exception here...
	}
	//convert JSON Array back to html format
	byte[] ByteArray = System.Text.Encoding.Unicode.GetBytes
		(serializer.Deserialize<List<List<string>>>(tb).ToHtmlTable());
	Response.Clear();
	Response.ClearContent();
	Response.ClearHeaders();
	Response.ContentType = "application/vnd.ms-excel";
	Response.AddHeader("Content-disposition", 
		"attachment; filename=" + "YourExcelReportName.xls");
	//encode international characters
	Page.Response.BinaryWrite(new byte[] { 0xFF, 0xFE });
	Response.BinaryWrite(ByteArray);
	Response.Flush();
	Response.End();
}

扩展方法，用于将 JSON 数组转换为纯 HTML 表

public static string ToHtmlTable(this List<List<string>> lists) {
string td = "<td align=\"right\">{0}</td>";
StringBuilder sb = new StringBuilder();
sb.Append("<table border=\"1\">");
foreach (List<string> list in lists) {
sb.Append("<tr>");
foreach (string i in list) {
sb.Append(string.Format(td, i));
}
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}

感谢阅读。