easyui datagrid导出Excel 有啥好的解决方法吗

Posted 2023-04-11

easyui是前台ui框架，对于前端来说是很难生成文件并下载的，但是可以通过后台(java为例)进行下载。

添加导出按钮，设置action跳转链接；

后台接收参数，查询数据库，使用POI新建excel；

通过response获得网页页面的输出流；

将文件保存到输出流（即文件会传输到网页前端页面，实现下载）；

注意的是，下载不要用ajax，可能会无法下载，a标签加 download属性可以设置文件名。

参考技术A ，主要的功能是把DataGrid中的数据转换成Excel的XML格式
'''将datagrid中的数据转换成Excel的XML格式'''

$.extend($.fn.datagrid.methods,
getExcelXml: function (jq, param)
var worksheet = this.createWorksheet(jq, param);
//alert($(jq).datagrid('getColumnFields'));
var totalWidth = 0;
var cfs = $(jq).datagrid('getColumnFields');
for (var i = 0; i < cfs.length; i++)
totalWidth += $(jq).datagrid('getColumnOption', cfs[i]).width;

//var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
return '<xml version="1.0" encoding="utf-8">' +
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
'<o:DocumentProperties><o:Title>' + param.title + '</o:Title></o:DocumentProperties>' +
'<ss:ExcelWorkbook>' +
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
'</ss:ExcelWorkbook>' +
'<ss:Styles>' +
'<ss:Style ss:ID="Default">' +
'<ss:Alignment ss:Vertical="Top" />' +
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
'<ss:Borders>' +
'<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
'<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
'<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
'<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
'</ss:Borders>' +
'<ss:Interior />' +
'<ss:NumberFormat />' +
'<ss:Protection />' +
'</ss:Style>' +
'<ss:Style ss:ID="title">' +
'<ss:Borders />' +
'<ss:Font />' +
'<ss:Alignment ss:Vertical="Center" ss:Horizontal="Center" />' +
'<ss:NumberFormat ss:Format="@" />' +
'</ss:Style>' +
'<ss:Style ss:ID="headercell">' +
'<ss:Font ss:Bold="1" ss:Size="10" />' +
'<ss:Alignment ss:Horizontal="Center" />' +
'<ss:Interior ss:Pattern="Solid" />' +
'</ss:Style>' +
'<ss:Style ss:ID="even">' +
'<ss:Interior ss:Pattern="Solid" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evendate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'<ss:Style ss:ID="odd">' +
'<ss:Interior ss:Pattern="Solid" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="odddate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'</ss:Styles>' +
worksheet.xml +
'</ss:Workbook>';
,

'''创建worksheet，将dataGrid的标题放到里面'''
createWorksheet: function (jq, param)
'''Calculate cell data types and extra class names which affect formatting'''
var cellType = [];
var cellTypeClass = [];
'''var cm = this.getColumnModel();'''
var totalWidthInPixels = 0;
var colXml = '';
var headerXml = '';
var visibleColumnCountReduction = 0;
var cfs = $(jq).datagrid('getColumnFields');
var colCount = cfs.length;
for (var i = 0; i < colCount; i++)
if (cfs[i] != '')
var w = $(jq).datagrid('getColumnOption', cfs[i]).width;
totalWidthInPixels += w;
if (cfs[i] === "")
cellType.push("None");
cellTypeClass.push("");
++visibleColumnCountReduction;

else
colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="130" />';
headerXml += '<ss:Cell ss:StyleID="headercell">' +
'<ss:Data ss:Type="String">' + $(jq).datagrid('getColumnOption', cfs[i]).title + '</ss:Data>' +
'<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
cellType.push("String");
cellTypeClass.push("");



var visibleColumnCount = cellType.length - visibleColumnCountReduction;

var result =
height: 9000,
width: Math.floor(totalWidthInPixels * 30) + 50
;

var rows = $(jq).datagrid('getRows');
// Generate worksheet header details.
var t = '<ss:Worksheet ss:Name="' + param.title + '">' +
'<ss:Names>' +
'<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + param.title + '\'!R1:R2" />' +
'</ss:Names>' +
'<ss:Table x:FullRows="1" x:FullColumns="1"' +
' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
'" ss:ExpandedRowCount="' + (rows.length + 2) + '">' +
colXml +
'<ss:Row ss:AutoFitHeight="1">' +
headerXml +
'</ss:Row>';

//将DataGrid的数据循环加入到Excel中
//Generate the data rows from the data in the Store
//for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++)
for (var i = 0, it = rows, l = it.length; i < l; i++)
t += '<ss:Row>';
var cellClass = (i & 1) ? 'odd' : 'even';
r = it[i];
var k = 0;
for (var j = 0; j < colCount; j++)
//if ((cm.getDataIndex(j) != '')
if (cfs[j] != '')
//var v = r[cm.getDataIndex(j)];
var v = r[cfs[j]];
if (cellType[k] !== "None")
t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
if (cellType[k] == 'DateTime')
t += v.format('Y-m-d');
else
t += v;

t += '</ss:Data></ss:Cell>';

k++;


t += '</ss:Row>';


result.xml = t + '</ss:Table>' +
'<x:WorksheetOptions>' +
'<x:PageSetup>' +
'<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
'<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />' +
'<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
'</x:PageSetup>' +
'<x:FitToPage />' +
'<x:Print>' +
'<x:PrintErrors>Blank</x:PrintErrors>' +
'<x:FitWidth>1</x:FitWidth>' +
'<x:FitHeight>32767</x:FitHeight>' +
'<x:ValidPrinterInfo />' +
'<x:VerticalResolution>600</x:VerticalResolution>' +
'</x:Print>' +
'<x:Selected />' +
'<x:DoNotDisplayGridlines />' +
'<x:ProtectObjects>False</x:ProtectObjects>' +
'<x:ProtectScenarios>False</x:ProtectScenarios>' +
'</x:WorksheetOptions>' +
'</ss:Worksheet>';
//alert(result.xml);
return result;

);

然后再新建一个一般处理程序
public void ProcessRequest(HttpContext context)
'''给要下载的Excel赋一个初始的文件名'''
string fn = DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".xls";
'''获取前台传回来的值，应该是一个XML文件的内容''''
string data = context.Request.Form["data"];
'''将相对路径转换为绝对路径，数据，编码方式'''
File.WriteAllText(context.Server.MapPath(fn), data, Encoding.UTF8);'''如果是gb2312的xml申明，第三个编码参数修改为Encoding.GetEncoding(936)'''

context.Response.Write(fn);'''返回文件名提供下载'''

将wpf datagrid导出为自定义Excel CSV文件

我有一个绑定到MVVM集合类的wpf数据网格。我有一些MVVM类的属性，它绑定到datagrid但不是每个都绑定。

我需要从datagrid导出Excel CSV文件中的数据。但MVVM类的某些属性未绑定到datagrid但需要在Excel文件中显示。所以我需要创建自定义列（datagrid中的列+一些额外的列）。

以下是我目前用于创建Excel CSV文件的代码：

importedDG.SelectAllCells(); 
importedDG.ClipboardCopyMode = DataGridClipboardCopyMode.IncludeHeader;
ApplicationCommands.Copy.Execute(null, importedDG);
importedDG.UnselectAllCells();
string path1 = "C:\test.csv"; 
string result1 = (string)Clipboard.GetData(DataFormats.CommaSeparatedValue); 
Clipboard.Clear(); 
System.IO.StreamWriter file1 = new System.IO.StreamWriter(path1);
file1.WriteLine(result1);file1.Close(); 

这将使用DG中的确切列创建文件，但不是我想要的额外列。我该如何添加它们？

答案

我猜你在网格控件上使用一种方法来生成CSV？你没有在你的问题中说明多少。

如果是这样，我会将此责任移至您的视图模型。您可以使用KBCsv等CSV库来执行编写数据的任务。