以前要下載web頁面中的資料要依靠sever端，現在使用Blob等較新技術可以直接使用javascript把頁面表格中的資料下載下來，本篇主要講述把表格資料下載為csv檔案。

例如我們想要把上面表格中的資料下載為csv檔案，步驟如下

1. 獲取表格中文字內容。拼接成csv格式的字串。如本例中最終拼接後的字串應為: Name;Math;Physics;Chemistry; \n Melanie;100;80;90; \n Tomas …… 95.
2. 本機配置的csv分割符為”;”, 如果你的主機csv配置的csv分割符為”,”, 把”;”替換為”,”即可。
3. 使用拼接的字串生成一個數組，傳給Blob建構函式，生成一個blob物件。

4. 使用瀏覽器支援的方法把檔案儲存為csv檔案， IE10+可以navigator.msSaveBlob, 火狐或Chrome可以使用URL.createObjectUrl和 a 標籤（通過設定其download屬性）聯合使用來儲存csv檔案

   程式碼如下：

   var columnDelimiter = ";"; //列分割符
   var lineDelimiter = "\n";  //行分割符
   function downloadTable(tableId, fileName) {
     var scoreTable = document.getElementById(tableId);
     var head = scoreTable.tHead;
     var
    
    ths = head.getElementsByTagName('th');
     var trs = scoreTable.tBodies[0].getElementsByTagName('tr');
   
     var result = '';
     for(let i=0,l=ths.length; i<l; i++){
         result += ths[i].innerHTML + columnDelimiter;
     }
     result += lineDelimiter;
   
     for(let i=0, l=trs.length; i<l; i++){
         let tds = trs[i].getElementsByTagName('td'
    
   );
         for(let j=0, l2=tds.length; j<l2; j++){
             result += tds[j].innerHTML + columnDelimiter;
         }
         result += lineDelimiter;
     }
     var blob = new Blob([result], {type: 'text/csv;charset=utf-8;'});
     var downloadLink = document.createElement("a");
     if ('download' in downloadLink) { // feature detection, Browsers that support HTML5 download attribute
         var url = URL.createObjectURL(blob);
         downloadLink.href = url;
         downloadLink.download = fileName;
         downloadLink.hidden = true;
         document.body.appendChild(downloadLink);
         downloadLink.click();
         document.body.removeChild(downloadLink);
     }else{
         if(navigator.msSaveBlob){ //IE10+
             navigator.msSaveBlob(blob, fileName);
         }
     }
   }
   
   downloadTable('score', 'score.csv'); //儲存csv檔案

   想檢視demo, 請點選這裡
   支援IE10+及較新版本的火狐和Chrome

Notes
1. 如果表格中資料全為Ascii字元的話，下載的csv檔案用excel開啟後，內容是正常顯示的，但是如果有中文或者日文等utf8字元，用excel開啟後會就會有亂碼。解決方法就是新增BOM, 即獲取要下載的字元後，在字串前新增 \ufeff
如要下載的字串為 str 新增BOM後則為 "\ufeff" + str。
2. 設定分隔符，一般來說csv檔案的分隔符為逗號，但在有些國家預設分隔符為分號（分隔符可以通過控制面板來設定），為了讓我們的程式碼具有通用性。我們可以在匯出的字串中設定一個固定的列分隔符， 在要匯出的字元前新增 sep=;, 即可以讓excel以;為列分隔符來開啟我們下載的csv檔案。
3. 如果上述兩個條件都滿足的話，我們就能使用excel在使用不同分隔符的區域開啟我們下載的含有utf-8的檔案，但遺憾的，BOM(\ufeff)和分隔符設定字串(sep=;)，都必須放在檔案的開頭，即1和2無法同時滿足。那麼怎麼辦呢？，答案為： 新增BOM以滿足條件1， 然後以utf-16小端編碼我們要下載的字串，再以製表符\t 作為列分隔符，那麼excel就可以正常開啟我們下載的檔案了。程式碼如下：

var str = "中國 utf8 字元" + "\t" + "blabal";
var blob = new Blob([new Uint8Array(_toUtf16LE(str))], {type: "text/csv;charset=UTF-16;"});

function _toUtf16LE (str) {
    var charCode, byteArray = [],
        len = str.length;
    byteArray.push(255, 254); // LE BOM
    for (var i = 0; i < len; ++i) {
        charCode = str.charCodeAt(i);
        // LE Bytes
        byteArray.push(charCode & 0xff);
        byteArray.push(charCode / 256 >>> 0);
    }
    return byteArray;
}

然後就可以使用開頭的介紹的方法把資料下載到csv檔案中了。
檢視Demo
參考：
設定sep