1. 程式人生 > >JavaScript將頁面表格資料匯出為Excel、CSV格式檔案(結合JQuery EasyUI的grid )

JavaScript將頁面表格資料匯出為Excel、CSV格式檔案(結合JQuery EasyUI的grid )

           
   function Prints() {
            //獲取grid 資料
            var data = JSON.stringify($('#datagrid').datagrid('getData').rows);
            //alert(data);
            if (data == '')
                return;
            outCsv(data, "請假彙總", true);
        }
        function outCsv(JSONData, ReportTitle, ShowLabel) {
            var CSV = '';
            /*               Set Report title in first row or line  在第一集的行或行報告title */
            CSV += ReportTitle + '\r\n\n';
            /*              If JSONData is not an object then JSON.parse will parse the JSON string in an Object
                            如果JSONData不是一個物件然後JSON.parse將解析物件中的JSON字串  */
            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
            /*              This condition will generate the Label/Header
                            這將產生的header label
            */
            if (ShowLabel) {
                var row = "";
                /*         This loop will extract the label from 1st index of on array
                           這個迴圈將從陣列的第一個索引中提取標籤。 */
                for (var index in arrData[0]) {
                    /*              Now convert each value to string and comma-seprated
                                    現在將每個值的字串,用逗號分開   根據實際情況重新賦值 */
                    if (index == "MM") {
                        index = "統計月份";
                    }
                    if (index == "TOTAL") {
                        index = "請假次數";
                    }
                    row += index + ',';
                }
                //擷取物件內的資料。
                row = row.slice(0, -1);
                /*  append Label row with line breakappend Label row with line break
                    附加帶換行符的標籤行  */
                CSV += row + '\r\n';
            }
            //1st loop is to extract each row   開始遍歷取資料
            for (var i = 0; i < arrData.length; i++) {
                var row = "";
                /*              2nd loop will extract each column and convert it in string comma-seprated
                                第二環路將提取每一列並將其轉換成字串逗號分開 */
                for (var index in arrData[i]) {
                    row += '"' + arrData[i][index] + '",';
                }
                row.slice(0, row.length - 1);
                //add a line break after each row
                CSV += row + '\r\n';
            }
            if (CSV == '') {
                alert("Invalid data");
                return;
            }
            //              Generate a file name    定義一個檔名一個檔名
            var fileName = "";
            //this will remove the blank-spaces from the title and replace it with an underscore
            fileName += ReportTitle.replace(/ /g, "_");
            // if browser is IE
            if (window.navigator.msSaveOrOpenBlob) {
                var csvContent = "\ufeff";
                var uriie = csvContent + CSV;
                var blob = new Blob([decodeURIComponent(encodeURI(uriie))], {
                    type: "data:text/csv;charset=utf-8,"
                });
                navigator.msSaveBlob(blob, fileName + '.csv');
            } else {
                var csvContent = "data:text/csv;charset=utf-8,\ufeff";
                var uriother = csvContent + CSV;
                // 第一種實現
                var encodedUri = encodeURI(uriother);
                var link = document.createElement("a");
                link.setAttribute("href", encodedUri);
                link.setAttribute("download", fileName + ".csv");
                document.body.appendChild(link);
                link.click();
                //var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURI(CSV);
                ////            Now the little tricky part.
                ////            you can use either>> window.open(uri);
                ////            but this will not work in some browsers
                ////            or you will not get the correct file extension
                ////           this trick will generate a temp <a /> tag   此技巧將生成一個臨時標記
                //var link = document.createElement("a");
                //link.href = uri;
                ////                set the visibility hidden so it will not effect on your web-layout
                ////              設定可見性,這樣它不會影響你的網頁佈局。
                //link.style = "visibility:hidden";
                //link.download = fileName + ".csv";
                ////              this part will append the anchor tag and remove it after automatic click
                ////              此部分將追加錨標記並在自動單擊後刪除它。
                //document.body.appendChild(link);
                //link.click();
                //document.body.removeChild(link);
            }
        }