前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我也太牛了,解决了浏览器中,前台导出csv格式,UTF-8编码,且excek打开不乱码!

我也太牛了,解决了浏览器中,前台导出csv格式,UTF-8编码,且excek打开不乱码!

作者头像
申君健
发布2018-09-21 15:44:23
4.8K0
发布2018-09-21 15:44:23
举报
文章被收录于专栏:前端侠2.0前端侠2.0

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. 弄一上午,肯定是失败啦,否则也用不了一上午。失败的方法是:

代码语言:javascript
复制
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

哈哈!把代码改为:

代码语言:javascript
复制
'77u/'+ base64(toCSV)

,解决问题! 

真是,4个字符折腾一天。真是只有4个字符。。。。。。。。

--------------------------------------

解释一下: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不比后台程序,转码是很不方便的。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015/01/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档