highchart 导出excel By Asp.net

文章目录

为了照顾小伙伴,用asp.net 写了份highchart简单导出excel的例子,希望对大家有所帮助

  • highchart导出 excel,主要用到了内部的getCSV,将数据post到服务端,至于服务端怎么处理大家就可以可显神通了,我所指知道的一般可以用 POINPOIaspose微软com+组件等等

####前端HTML

1
2
3
4
5
6
7
8
9
10
11
 <div>
<div class="main">
<div class="chart-container">
<div id="chart1" class="chart">
</div>
</div>
<p>
<input type="button" value="Export Excel" id="btnDownLoad" />
</p>
</div>
</div>

####引入相关插件

1
2
3
4
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/export-excel.js"></script>

####前端初始化脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart1'
},
title: {
text: '单击图表放大显示'
},
credits: {
text: "www.peng8.net",
href: "http://www.peng8.net/"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}, {
name: 'China',
data: [1.8, 2.2, 3.7, 4.5, 5.9, 6.2, 7.0, 9.6, 10.2, 11.3, 6.6, 4.8]
}]

});

$('.chart-container').bind('mousedown', function () {
$(this).toggleClass('modal');
$('.chart', this).highcharts().reflow();
});

$("#btnDownLoad").click(function () {
alert(chart.getCSV());
Highcharts.post(location.href + "?action=getExcel", {
csv: chart.getCSV()
});
})
});
</script>

####后台导出代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
protected void Page_Load(object sender, EventArgs e)
{
string action = string.IsNullOrEmpty(Request["action"]) ? string.Empty : Request["action"];

switch (action)
{
case "getExcel":
ExportExcel();
break;
}
}
protected void ExportExcel()
{
DataTable tblDatas = new DataTable();
string str = Request.Form["csv"];
if (!string.IsNullOrEmpty(str))
{
string[] result = Request.Form["csv"].Replace("\r\n","|").Split('|');
List<string> TbColumn = new List<string>();
//MatchCollection matches = Regex.Matches(result[0], @"Category,");
for (int i = 0; i < result.Length;i++ )
{
if (i == 0)
{
for (int j = 0; j < result[i].Split(',').Length;j++ )
{

if (!tblDatas.Columns.Contains(result[i].Split(',')[j]))
{
tblDatas.Columns.Add(result[i].Split(',')[j], Type.GetType("System.String"));
TbColumn.Add(result[i].Split(',')[j]);
}
}
}
else {
if (!string.IsNullOrEmpty(result[i]))
{
DataRow newRow = tblDatas.NewRow();
int v = 0;
for(int j = 0; j < result[i].Split(',').Length;j++ )
{
if (j > 1) { j++; }
newRow[TbColumn[v++]] = result[i].Split(',')[j];
}
tblDatas.Rows.Add(newRow);
}
}
}
}
Providers.NPOIHelper.ExportByWeb(tblDatas, "Highchart统计数据", DateTime.Now.ToString("yyyyMMddhhmmss") + ".xls");
}

分析说明:
后端代码写的很粗略,不好的地方,望大家见谅!主要用到 NPOI.dll,自己封装了一个excelHelper.cs 类文件,用来处理 DataTable数据集 一键插入到excel里。

  • 最后来张导出的效果图

Alt text

DEMO下载 :点击此处下载