JS实现无服务器交互的table表格CSV下载

工作需要提供一个表格的下载,常规的实现方式有如下2种:

一.将表格的查询排序条件重新提供给服务端,服务端重新查询数据并通过set http header的方式进行下载.缺点是1,页面需要对用户的排序行为进行记录,比较繁琐.2.服务器需要重新查询,如果查询比较复杂,效率是有问题的.

二.js将表格内容直接生成csv,然后将整个csv回推给服务端,服务端生成http头并将内容原封不动的返回.缺点是要进行一次服务器交互,且个人感觉服务端代码没有必要.

后来在网上查找更优方案的时候发现了data uri (Wiki),然后找了一些资料,最终完成了js直接通过页面的table元素生成csv并无服务端交互的下载.

主要步骤:

1.通过js构造csv

2.构造data uri并模拟a.click事件. 这里面在做的时候发现了一点问题,就是当直接对csv的string下载的时候,换行符会消失掉,考虑到data uri对base64的支持比较好.所以我就用了一个偷懒的办法-将字符串先encode为base64,然后将base64data作为参数.

firefox 25, chrome 25测试通过, safari对于a连接的download标签支持(影响下载后默认的文件名)有问题,下载内容没问题.

代码如下:

function downloadCSV(){                                                
    var data = $("#tableContent_").table2CSV({delivery:'value'})       
    var base64data =  base64encode(utf16to8(data))//if not utf16to8,chinese char will error                     
    var uri = 'data:application/csv;base64,' + base64data              
    var downloadLink = document.createElement("a");                    
    downloadLink.download = "mytabledata.csv"                         
    downloadLink.href=uri;                                             
    document.body.appendChild(downloadLink);                           
    downloadLink.click();                                              
    document.body.removeChild(downloadLink);                           
}

 

 

参考资料:

js table 2 csv

http://www.kunalbabre.com/projects/table2CSV.php

js base64 encode/decode

http://www.cnblogs.com/ricksun/archive/2012/08/27/2658654.html

MySQL Grails 乱码配置

1. 修改 /etc/mysql/my.cnf

mysql 5.5 以后,注意mysqld的配置,不是default-character-set 而是 character-set-server

[client]
default-character-set=utf8
 [mysqld]
character-set-server=utf8
 [mysql]
default-character-set=utf8

在相应位置添加如上内容

2.修改mysql的配置

SHOW VARIABLES LIKE '%char%'

正常的应该如下:
+————————–+—————————-+
| Variable_name            | Value                      |
+————————–+—————————-+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+————————–+—————————-+

如果有哪个为latin1,设置为utf8,如:

SET character_set_server='utf8';

3.建数据库/表时

CREATE DATABASE MYDATABASENAME charset utf8;

4.配置:

url="jdbc:mysql://localhost:3306/testdb?useUnicode=true&characterEncoding=UTF-8"