导出Excel插件——Export-CSV ---20150610

出处：http://bbs.hcharts.cn/thread-99-1-1.html

 

导出Excel插件——Export-CSV

一、插件信息

• 插件名：Export-CSV（导出Execl文件）
• 插件地址：https://rawgithub.com/highslide-software/export-csv/master/export-csv.js
• 插件使用：在页面引入export-csv.js即可，详见在线演示平台《导出Excel表格》

二、原理解析
通过分析源码，其原理是遍历Highcharts的数据列，并取值构造成逗号分开的字符串，并提交到指定的导出服务器下载保存为.csv文件。

1、CSV

CSV即逗号分隔值文件格式，通常是纯文本文件。如果你的机器上装了Microsoft Excel的话，.csv 文件默认是被 Excel 打开的。

2、自定义导出服务器
Export-CSV导出服务器比较简单，实现代码如下

1. <?php
2. $csv = $_POST['csv'];
3. if ($csv) {
4.        header('Content-type: text/csv');
5.        header('Content-disposition: attachment;filename=chart.csv');
6.        echo $csv;
7. }
8. ?>

复制代码

自定义导出事件

1. $("#download").click(function(){
2.     Highcharts.post('export-cvs.php', { //其中export-cvs.php即为上面代码
3.         csv: chart.getCSV()
4.    });
5. })

复制代码

3、中文网提供的导出服务器
地址：http://export.hcharts.cn/cvs.php

实例：

1. Highcharts.post('http://export.hcharts.cn/cvs.php', { 
2.   csv: chart.getCSV()
3. });

复制代码

补充：Office Excel打开时乱码问题解决办法

1、乱码分析
     我用记事本或WPS Excel打开导出的cvs文件时，中文不会乱码，而用Office的Excel打开时，中文就乱码。后来网上查了下，原因是Office的Excel默认是以ANSI 形式打开的，也就是对应中文GBK编码，而默认导出的是UTF-8格式，解决办法就是编码转换。

2、解决办法
     将获取的cvs代码转换为GBK编码即可，修改后的导出服务器代码如下：

PHP版：

1. <?php
2. /**
3. * DISCLAIMER: Don't use [url=http://www.highcharts.com/studies/csv-export/csv.php]www.highcharts.com/studies/csv-export/csv.php[/url] in 
4. * production! This file may be removed at any time.
5. * 由Highcharts中文网修改提供中文乱码解决办法
6. */
7. $csv = $_POST['csv'];
8. $csv = iconv("utf-8","gbk",$csv);//转换成GBK编码
10. if ($csv) {
11.         header('Content-type: text/csv;charset=gbk');
12.         header('Content-disposition: attachment;filename=chart.csv');
13.         echo $csv;
14. }
15. ?>

复制代码

java版：

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <%
3.     String csv = new String(request.getParameter("csv").getBytes("utf-8"),"gbk");
4.     if(csv!=null && !"".equals(csv)) {
5.         response.setHeader("Content-type","text/csv");
6.         response.setHeader("Content-disposition", "attachment;filename=chart.csv");
7.         response.getWriter().print(csv);
8.     }
9. %>

复制代码

另外，从提交cvs代码处转换编码也可实现。

补充：
java版的导出服务器代码如下：

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <% 
3.     String csv = request.getParameter("csv");
4.     if(!"".equals(csv)) {
5.             response.setHeader("Content-type","text/csv");
6.             response.setHeader("Content-disposition", "attachment;filename=chart.csv");
7.             response.getWriter().print(csv);
8.     }
9. %>

复制代码