在作項目的過程當中，每每客戶須要系統（不管是Browser仍是Client）能夠將數據以所需求的形式下載下來。今天呢，我就前端方面，介紹如何將前端的信息以各類格式導出。
一、文字導出
這裏介紹到一個工具，是Jquery的插件，名字叫wordexport.它將所選擇的區域以word文檔的形式下載下來，但只包含文本信息，其餘如圖片等無效，且對於表格，只會將表格裏的信息一行疊在一塊兒。javascript
1.一、插件引用
1 <script type="text/javascript" src="js/FileSaver.js"></script> 2 <script type="text/javascript" src="js/jquery.wordexport.js"></script>
1.二、使用
1 $(function() { 2 $(".word-export").click(function() { 3 $("#pagecontent").wordExport("fileName"); //fileName爲導出的word文件的命名 4 }); 5 });
1.3資源下載
http://www.jq22.com/demo/exportWord20161214/js/FileSaver.js
http://www.jq22.com/demo/exportWord20161214/js/jquery.wordexport.jshtml
二、表格導出
一開始我一樣介紹一個Jquery插件，名字叫作Tableexport。它能夠將HTML中Table標籤下的表格數據以多種格式下載到本地。前端
2.一、插件引用
1 <script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script> 2 <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script> 3 <script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script> 4 <script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script> 5 <script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script> 6 <script type="text/javascript" src="tableExport.min.js"></script>
2.二、使用
1 // CSV format 2 $('#tableID').tableExport({type:'csv'}); 3 4 // Excel 2000 html format 5 $('#tableID').tableExport({type:'excel'}); 6 7 // XML Spreadsheet 2003 file format with multiple worksheet support 8 $('table').tableExport({type:'excel', 9 excelFileFormat:'xmlss', 10 worksheetName: ['Table 1','Table 2', 'Table 3']}); 11 12 // PDF export using jsPDF only 13 $('#tableID').tableExport({type:'pdf', 14 jspdf: {orientation: 'p', 15 margins: {left:20, top:10}, 16 autotable: false} 17 }); 18 19 // PDF format using jsPDF and jsPDF Autotable 20 $('#tableID').tableExport({type:'pdf', 21 jspdf: {orientation: 'l', 22 format: 'a3', 23 margins: {left:10, right:10, top:20, bottom:20}, 24 autotable: {styles: {fillColor: 'inherit', 25 textColor: 'inherit'}, 26 tableWidth: 'auto'} 27 } 28 }); 29 30 // PDF format with callback example 31 function DoCellData(cell, row, col, data) {} 32 function DoBeforeAutotable(table, headers, rows, AutotableSettings) {} 33 $('table').tableExport({fileName: sFileName, 34 type: 'pdf', 35 jspdf: {format: 'bestfit', 36 margins: {left:20, right:10, top:20, bottom:20}, 37 autotable: {styles: {overflow: 'linebreak'}, 38 tableWidth: 'wrap', 39 tableExport: {onBeforeAutotable: DoBeforeAutotable, 40 onCellData: DoCellData}}} 41 });
2.三、資源下載
https://github.com/hhurz/tableExport.jquery.pluginjava
除去這個插件，我本身介紹一種將Jquery-EasyUI中DataGrid中數據以Excel形式下載到本地的方法。實例代碼以下：jquery
1 $("#SaveBtn").click(function() { 2 var data = JSON.stringify($('#table').datagrid('getData').rows); 3 alert(data); 4 if (data == '') 5 return; 6 JSONToCSVConvertor(data, "Download", true); 7 }); 8 9 function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) { 10 //If JSONData is not an object then JSON.parse will parse the JSON string in an Object 11 var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) 12 : JSONData; 13 14 var CSV = ''; 15 //Set Report title in first row or line 16 17 // CSV += ReportTitle + '\r\n\n'; 18 19 //This condition will generate the Label/Header 20 if (ShowLabel) { 21 var row = ""; 22 23 //This loop will extract the label from 1st index of on array 24 for ( var index in arrData[0]) { 25 26 //Now convert each value to string and comma-seprated 27 row += index + ','; 28 } 29 30 row = row.slice(0, -1); 31 32 //append Label row with line break 33 CSV += row + '\r\n'; 34 } 35 36 //1st loop is to extract each row 37 for (var i = 0; i < arrData.length; i++) { 38 var row = ""; 39 40 //2nd loop will extract each column and convert it in string comma-seprated 41 for ( var index in arrData[i]) { 42 row += '"' + arrData[i][index] + '",'; 43 } 44 45 row.slice(0, row.length - 1); 46 47 //add a line break after each row 48 CSV += row + '\r\n'; 49 } 50 51 if (CSV == '') { 52 alert("Invalid data"); 53 return; 54 } 55 56 //Generate a file name 57 var fileName = "MyReport_"; 58 //this will remove the blank-spaces from the title and replace it with an underscore 59 fileName += ReportTitle.replace(/ /g, "_"); 60 61 //Initialize file format you want csv or xls 62 var uri = 'data:text/csv;charset=utf-8,' + escape(CSV); 63 64 // Now the little tricky part. 65 // you can use either>> window.open(uri); 66 // but this will not work in some browsers 67 // or you will not get the correct file extension 68 69 //this trick will generate a temp <a /> tag 70 var link = document.createElement("a"); 71 link.href = uri; 72 73 //set the visibility hidden so it will not effect on your web-layout 74 link.style = "visibility:hidden"; 75 link.download = fileName + ".csv"; 76 77 //this part will append the anchor tag and remove it after automatic click 78 document.body.appendChild(link); 79 link.click(); 80 document.body.removeChild(link); 81 }
註釋：這裏主要用到的datagrid的data屬性獲取表的字符串，在將字符串編輯後賦予到HTML的標籤<a>，以CSV的格式下載到本地。git
三、圖片導出
在Web前端中，能夠展示圖片形式的有img、canvas與svg三種標籤形式。通常狀況下，均可以將其轉換<a>標籤的形式，以jpg格式下載下來。github
四、甭管是啥，都以圖片導出
這裏介紹的是一種插件叫作html2canvas。web
4.一、插件引用
1 <script type="text/javascript" src="../../mui.js" ></script> 2 <script type="text/javascript" src="../../html2canvas.js" ></script>
4.二、使用
1 html2canvas(document.getElementsByClassName("pvtRendererArea"), { 2 allowTaint: true, 3 taintTest: false, 4 onrendered: function(canvas) { 5 canvas.id = "mycanvas"; 6 var image = new Image(); 7 ////指定格式PNG 8 //image.src = canvas.toDataURL("image/jpg"); 9 10 //console.log("ASd"); 11 //document.body.appendChild(canvas); 12 //生成base64圖片數據 13 image.src = canvas.toDataURL("image/jpg"); 14 //window.open(image); 15 16 var link = document.createElement("a"); 17 link.href = image.src; 18 19 //set the visibility hidden so it will not effect on your web-layout 20 link.style = "visibility:hidden"; 21 link.download = "pivotTable" + ".jpg"; 22 23 //this part will append the anchor tag and remove it after automatic click 24 document.body.appendChild(link); 25 link.click(); 26 document.body.removeChild(link); 27 28 } 29 });
4.三、資源下載
http://html2canvas.hertzen.com/canvas
以上就是Web端數據導出的功能介紹，後續繼續補充。。。app