使用javascript實作json資料以csv格式下載_javascript技巧

摘要：
　　最近有一個非專案的小需求，就是將專案開發分工文件化，方便後製管理維護。但是開發時，分工安排都是以json格式記錄的，所以就做了一個將json資料以csv格式下載到本地。

代碼：

複製程式碼 程式碼如下:

   
   
        >
       
   
   
       

           

Enter JSON data

           

[{"Vehicle":"BMW","Date":"30 Jul 2013 09:24 AM","Location" :"Hauz Khas","Speed":42},{"Vehicle":"Honda CBR","Date":"30 Jul 2013 12:00 AM","Location":"Military Road","Speed": 0},{"Vehicle":"Supra","Date":"30 Jul 2013 07:53 AM","Location":"Sec-45","Speed":58},{"Vehicle":"Land Cruiser","Date":"30 Jul 2013 09:35 AM","Location":"DLF Phase I","Speed":83}]
           

           

            Download CSV
       

   

download.js

複製程式碼 程式碼如下:

$(文檔).ready(function() {
    「使用嚴格」；
    var mo = {
        初始化：函數（）{
            $('.download').click(function() {
                var data = $('#txt').val();
                if (data === '') {
                    返回；
                }
                mo.JSONToCSVConvertor(data, true);
            });
        },
        JSONToCSVConvertor: 函數(JSONData, ShowLabel) {
            var arrData = JSONData 類型 !== '物件' ? JSON.parse(JSONData) : JSONData;
            var CSV = '';
            if (顯示標籤) {
                var row = "";
                for (arrData[0] 中的 var 指標) {
                    行 = 指標 ',';
                }
                row = row.slice(0, -1);
                CSV = 使用 'rn';
            }
            for (var i = 0; i                 var row = "";
                for (arrData[i] 中的 var 指標) {
                    var arrValue = arrData[i][index] == null ？ "" : '="' arrData[i][index] '"';
                    row = arrValue ',';
                }
                row.slice(0, row.length - 1);
                CSV = 使用 'rn';
            }
            if (CSV == '') {
                Growl.error("無效資料");
                返回；
            }
            var fileName = "結果";
            if (mo.msieversion()) {
                var IEwindow = window.open();
                IEwindow.document.write('sep=,rn' CSV);
                IEwindow.document.close();
                IEwindow.document.execCommand('SaveAs', true, fileName ".csv");
                IEwindow.close();
            } 其他 {
                var uri = 'data:application/csv;charset=utf-8,' escape(CSV);
                var link = document.createElement("a");
                link.href = uri;
                link.style = "可視性:非表示";
                link.download = ファイル名 ".csv";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }、
        msieversion: function() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer の場合、バージョン番号を返します
            {
                true を返します;
            } else { // 別のブラウザの場合、
                false を返します;
            }
            false を返します;
        }、
        main: function() {
            mo.init();
        }
    };
    mo.main();
});

小结：
　　注意 json 形式 [{},{}]、ファイル名は js 内で定義された量ファイル名です。主な問題は、他の会議が自動的に一行空行を追加し、各要素が先頭に '=' を追加することです。

ダウンロード下にあるデータ格式: