在实际生产生活开发过程中,我们经常需要“报表”,所以很多人都喜欢用EasyUI、BootStrap等前端框架进行报表呈现,报表呈现又存在需要导出Excle文档的基本功能,我在我现在的公司,发现之前的代码,导出Excle,并不是导出的界面上你看到的,而是在后台重新查询了一遍,再通过方法生成Excle,存到某一个文件夹,再通过这个文件夹里面的文件位置,下载Excle,这个文件夹,在每次生成Excle文档的时候,都会删除一次三天前的数据,如此也没有所谓备份的需求。如此,我便有此思考:明明数据已在界面上,为何此时要多访问一次数据库,又为何无备份需求,又要在服务器上存这个文件达三天,又为何列标题格式已在前端界面做好了,还需要在后台用算法写一遍,且面对多级列标题无法实现(我是说我目前这家公司的后台方法无法实现,或许是之前没遇到这种需求,这次我遇到了),等等一系列的想法,促使我研究,如何直接将EsayUI的DataGrid表格导出来,后台不需要重新进行逻辑处理。导出全部数据,适用客户端分页的表格,毕竟数据都没在前端,怎么导出呢?
此功能代码大体来源于网络,我个人做了些修改,并处理了其中某几处小Bug,但是大体来源于不知名的前辈,在此感谢!
JS代码如下(下载地址:此资料因CSDN未提供删除功能,代码有更改,大家不要下载了,以我文中代码为准):
<script type="text/javascript">
/*
作 用:将EasyUI的DataGrid表格,直接导出Excle
例 子: EasyUIDataGridToExcle('SalaryReport', $('#dg'), 'getRows',nameList);
说 明:文档名字,避免汉字,容易乱码
*/
// strXlsName :文檔名字 exportGrid:$('#dg') H:getData:所有數據 getRows:當前頁的數據 nameList:字段名(按順序)
function EasyUIDataGridToExcle(strXlsName, exportGrid,H,nameList) {
var f = $('<form action="../ashx/common.ashx?ActionType=EasyUIDataGridToExcle" method="post" id="fm1"></form>');
var i = $('<input type="hidden" id="txtContent" name="txtContent" />');
var l = $('<input type="hidden" id="txtName" name="txtName" />');
i.val(ChangeToTable(exportGrid, H, nameList));
i.appendTo(f);
l.val(strXlsName);
l.appendTo(f);
f.appendTo(document.body).submit();
var newf = document.getElementById("fm1");
document.body.removeChild(newf);
};
function ChangeToTable(printDatagrid, H, nameList) {
var tableString = '<table cellspacing="0" class="pb">';
var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
var columns = printDatagrid.datagrid("options").columns; // 得到columns对象
//var nameList = new Array();
var t = 1;
var y = 1;
// 载入title
if (typeof columns != 'undefined' && columns != '') {
$(columns).each(function (index) {
tableString += '\n<tr>';
if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
for (var i = 0; i < frozenColumns[index].length; ++i) {
if (!frozenColumns[index][i].hidden) {
tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
}
if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
}
//if (typeof frozenColumns[index][i].field == 'undefined' || frozenColumns[index][i].field == '') {
// for (var q = 0; q < frozenColumns.length; ++q) {
// for (var r = 0; r < frozenColumns[q][i].rowspan; ++r) {
// if (typeof frozenColumns[q][r].field != 'undefined' && frozenColumns[q][r].field != '') {
// nameList.push(frozenColumns[q][r]);
// }
// }
// }
//}
//if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
// nameList.push(frozenColumns[index][i]);
//}
tableString += '>' + frozenColumns[index][i].title + '</th>';
}
}
}
for (var i = 0; i < columns[index].length; ++i) {
if (!columns[index][i].hidden) {
tableString += '\n<th width="' + columns[index][i].width + '"';
if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
tableString += ' rowspan="' + columns[index][i].rowspan + '"';
}
if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
tableString += ' colspan="' + columns[index][i].colspan + '"';
}
//if (typeof columns[index][i].field == 'undefined' || columns[index][i].field == '') {
// }
//if (typeof columns[index][i].field == 'undefined' || columns[index][i].field == '')
//{
// for (var r = 0; r < columns[index][i].colspan;r++)
// {
// for (var u = 0; u < columns[index].length; u++) {
// if (typeof columns[u][i].field != 'undefined' && columns[u][i].field != '') {
// nameList.push(columns[u][i]);
// }
// }
// }
//}
//if (typeof columns[0][i].field != 'undefined' && columns[0][i].field != '') {
// nameList.push(columns[index][i]);
//}
tableString += '>' + columns[index][i].title + '</th>';
}
}
tableString += '\n</tr>';
});
}
//获取表格数据内容
var data = printDatagrid.datagrid(H);
var rows;
if (H == 'getData')
rows = data.originalRows;
else
rows = data;
for (var i = 0; i < rows.length; ++i) {
tableString += '\n<tr>';
for (var j = 0; j < nameList.length; ++j) {
var e = nameList[j].lastIndexOf('_0');
tableString += '\n<td';
if (nameList[j].align != 'undefined' && nameList[j].align != '') {
tableString += ' style="mso-number-format:\'\@\';text-align:' +nameList[j].align + ';"';
}
tableString += '>';
if (e + 2 == nameList[j].length) {
tableString += rows[i][nameList[j].substring(0, e)];//
}
else{
tableString += rows[i][nameList[j]];//
}
tableString += '</td>';
}
tableString += '\n</tr>';
}
tableString += '\n</table>';
return tableString;
}
</script>
后台代码如下(C#):
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string sActionType = context.Request.Params.Get("ActionType") == null ? "" : context.Request["ActionType"].Trim();
if (sActionType.Equals("EasyUIDataGridToExcle"))
{
#region 將EasyUI的DataGrid中的數據 導出Excle
context.Response.Clear();
context.Response.Buffer = true;
context.Response.Charset = "utf-8";
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.AppendHeader("content-disposition", "attachment;filename=\"" + HttpUtility.HtmlEncode(context.Request["txtName"] ?? DateTime.Now.ToString("yyyyMMdd")) + ".xls\"");
context.Response.ContentType = "Application/ms-excel";
context.Response.Write("<html>\n<head>\n");
context.Response.Write("<style type=\"text/css\">\n.pb{font-size:13px;border-collapse:collapse;} " +
"\n.pb th{font-weight:bold;text-align:center;border:0.5pt solid windowtext;padding:2px;} " +
"\n.pb td{border:0.5pt solid windowtext;padding:2px;}\n</style>\n</head>\n");
context.Response.Write("<body>\n" + context.Request["txtContent"] + "\n</body>\n</html>");
context.Response.Flush();
context.Response.End();
#endregion
}
}
具体调用如下:
<script type="text/javascript">
function DoExcle() {
var nameList = new Array();
nameList.push('FORM_NO');
nameList.push('CS1');
nameList.push('CS2');
nameList.push('CS3');
nameList.push('CS4');
//nameList的push顺序,要按照你导出的数据的数据所在列的顺序添加,多级表头要特别注意
EasyUIDataGridToExcle('SalaryReport', $('#dg'), 'getData', nameList);
}
</script >
效果图:
EasyUI DataGrid:
Excle: