blob 導出csv 用execl打開出現亂碼

解決方式，在傳入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-八、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         }