文档章节

blob 导出csv 用execl打开出现乱码

黑魔法
 黑魔法
发布于 2016/12/07 11:26
字数 1230
阅读 906
收藏 0

解决方式,在传入blob的字符前加”\uFEFF”;,具体代码如下

ExcellentExport.js的方法,利用base64下载文件。支持chrome ,opera,firefox. 于是决定拿来为我所用!

说明一下,这个js的好处是:一句js脚本,就能前台下载,完全无须后台。

但外国人不了解中文的csv用excel打开直接乱码。 但用记事本打开,再直接保存,或另存为ansi都可以让中文不乱码。

js里默认应该是utf-8,昨天试了用utf-8转gb2312,失败了!

于是找到这个:

utf-8保存的csv格式要让Excel正常打开的话,必须加入在文件最前面加入BOM(Byte order mark),具体楼主你可以搜索一下关于BOM的介绍。

ANSI的话是可以做到正常显示和保存,但是这是有前提的,就是必须在你的电脑(区域和语言设置)把对非Unicode字符处理设置为Chinese,如果是English的话,显示照样是乱码。

Unicode的csv,Excel就根本不支持,打开虽然可以显示不乱码,但是已经不是按逗号显示在不同的单元格里面了,而是按行显示在第一个单元格里面。     

再找到这个:

什么是BOM 
    BOM(byte-order mark),即字节顺序标记,它是插入到以UTF-8、UTF16或UTF-32编码Unicode文件开头的特殊标记,用来识别Unicode文件的编码类型。具体编码如下表:
BOM                  Encoding  
EF BB BF         UTF-8 
FE FF                UTF-16 (big-endian) 
FF FE                UTF-16 (little-endian) 
00 00 FE FF     UTF-32 (big-endian) 
FF FE 00 00     UTF-32 (little-endian)

   微软建议所有的 Unicode 文件应该以 ZERO WIDTH NOBREAK SPACE(U+FEFF)字符开头。这作为一个“特征符”来识别文件中使用的编码和字节顺序。BOM的本意不错,但它并不是一个通用标准,从而导致了很多不兼容的问题。

经过用winhex等验证,乱码的csv直接保存后,记事本会自动增加BOM前缀。于是弄了一上午都在想办法在“要输出的文本”前增加上EF BB BF. 弄一上午,肯定是失败啦,否则也用不了一上午。失败的方法是:

base64(String.fromCharCode(0xef, 0xbb, 0xbf) +我要输出的文本)

或是根据winhex对正确文件的显示,在里面补充一些个0x00,都不行。因为EF BB BF无论怎么加,一经编码都变成了:茂禄驴(16进制是:C3 AF C2 BB C2 BF 00).

吃过饭回来,想到BASE64可以保存图片。那么我要是用这工具分别编码一下正确和乱码的文件不就行了。

于是用:http://www.fishlee.net/Tools/GetImageBase64Code  来试了下,结果真找到了不同。

记事本另存的正确结果:77u/5bqP5Y+3LOS/oeaBrw0K5ae

直接保存,无BOM头的结果:5bqP5Y+3LOS/oeaBrw0K5ae

 

释一下:ExcellentExport.js的思路,就是构造这样一个a标签:
<a target="_blank" href="data:application/csv;base64,5bqP5YNCg==" download="ok.csv" style="display: none;"><span>00</span></a>
把文字base64后,指定文件名,就可能通过<a>来前台下载文件了。完全无须后端。

之后最大的问题是csv乱码,遇到过的朋友一定会知道的。而js不比后台程序,转码是很不方便的。

导出CSV后,字母和数字正常,中文成了乱码,一番google发现,有人提出用BOM的方式解决,主要是在导出路径添加后缀 \uFEFF

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
 2             //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
 3             var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
 4 
 5             var CSV = '';
 6             //Set Report title in first row or line
 7 
 8             CSV += ReportTitle + '\r\n\n';
 9 
10             //This condition will generate the Label/Header
11             if (ShowLabel) {
12                 var row = "";
13 
14                 //This loop will extract the label from 1st index of on array
15                 for (var index in arrData[0]) {
16 
17                     //Now convert each value to string and comma-seprated
18                     row += index + ',';
19                 }
20 
21                 row = row.slice(0, -1);
22 
23                 //append Label row with line break
24                 CSV += row + '\r\n';
25             }
26 
27             //1st loop is to extract each row
28             for (var i = 0; i < arrData.length; i++) {
29                 var row = "";
30 
31                 //2nd loop will extract each column and convert it in string comma-seprated
32                 for (var index in arrData[i]) {
33                     row += '"' + arrData[i][index] + '",';
34                 }
35 
36                 row.slice(0, row.length - 1);
37 
38                 //add a line break after each row
39                 CSV += row + '\r\n';
40             }
41 
42             if (CSV == '') {
43                 alert("Invalid data");
44                 return;
45             }
46 
47             //Generate a file name
48             var fileName = "";
49             //this will remove the blank-spaces from the title and replace it with an underscore
50             fileName += ReportTitle.replace(/ /g, "_");
51 
52             //Initialize file format you want csv or xls
53             var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(CSV);
54 
55             // Now the little tricky part.
56             // you can use either>> window.open(uri);
57             // but this will not work in some browsers
58             // or you will not get the correct file extension    
59 
60             //this trick will generate a temp <a /> tag
61             var link = document.createElement("a");
62             link.href = uri;
63 
64             //set the visibility hidden so it will not effect on your web-layout
65             link.style = "visibility:hidden";
66             link.download = fileName + ".csv";
67 
68             //this part will append the anchor tag and remove it after automatic click
69             document.body.appendChild(link);
70             link.click();
71             document.body.removeChild(link);
72         }

 

 

© 著作权归作者所有

共有 人打赏支持
黑魔法
粉丝 12
博文 175
码字总数 44775
作品 0
武汉
前端工程师
私信 提问
execl打开linux下cvs文件乱码问题解决办法

好久没写过文章了,今天遇到一个execl打开linux下cvs文件乱码的问题顺便记录下问题的解决办法。很多时候需要写一些脚本定时导出sql报表,导出的文件直接用execl打不开或者打开有中文乱码。如...

vzhuomu
07/18
0
0
mongo数据库导出mongoexport命令的使用

我用的MongoDB管理工具是Robo3T,今天需要从数据库中将集合数据导出,但是Robo3T我不怎么会玩,好像没有直接导出的功能,于是上网查了一下,找到了mongoexport这个命令,可以轻松导出数据在m...

itzhongxin
2017/12/05
0
0
将多个csv文件合成一个execl文件

1.需求 从数据库中导出了几个csv文件,但是需要一个execl文件,每张表名以csv文件名命名即可 2.准备工作 1)安装pip https://pypi.python.org/pypi/pip tar zxvf pip-8.1.2.tar.gz cd pip-8...

gongniue
2016/08/25
0
0
求教csv导出乱码问题

写了个简易版的CsvRender 导出csv文件,excel打开中文是乱码。已经加了BOM头。 我本机是ubuntu, libreoffice打开是正常的,开虚拟机excel打开中文乱码。...

Fred
2012/11/15
5.1K
4
mongoexport --csv 如何导出全字段

os:centos 6.4 x86_64 mongodb:2.4.3 现在有个mongodb 集合字段比较多,而且想全部导出来,然后再导入到execl中。使用MongoVUE 1.6.1 到成execl,由于数据超过65535,老提示导不出来,我的e...

hua_zi
2013/10/14
4.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
21
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
14
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部