Highcharts

highchart 导出excel By Asp.net

文章目录
  1. 前端HTML
  2. 引入相关插件
  3. 前端初始化脚本
  4. 后台导出代码实现

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

  • highchart导出 excel，主要用到了内部的getCSV，将数据post到服务端，至于服务端怎么处理大家就可以可显神通了，我所指知道的一般可以用 POI、NPOI、aspose、微软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下载 ：点击此处下载