JavaScript將頁面表格資料匯出為Excel、CSV格式檔案(結合JQuery EasyUI的grid )
阿新 • • 發佈:2019-02-07
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); } }