为什么80%的码农都做不了架构师?>>>
解决方式,在传入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标签:
把文字base64后,指定文件名,就可能通过来前台下载文件了。完全无须后端。
之后最大的问题是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 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 }