【1】Web端文字、表格、图片导出

 

在做项目的过程中，往往客户需要系统（无论是Browser还是Client）可以将数据以所需求的形式下载下来。今天呢，我就前端方面，介绍如何将前端的信息以各种格式导出。

1、文字导出

这里介绍到一个工具，是Jquery的插件，名字叫wordexport.它将所选择的区域以word文档的形式下载下来，但只包含文本信息，其他如图片等无效，且对于表格，只会将表格里的信息一行叠在一起。

1.1、插件引用

<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript" src="js/jquery.wordexport.js"></script>

 

1.2、使用

$(function() { 
　　$(".word-export").click(function() {
　　　　$("#pagecontent").wordExport("fileName"); //fileName为导出的word文件的命名
 　});
});

 

 

 

1.3资源下载

http://www.jq22.com/demo/exportWord20161214/js/FileSaver.js 
http://www.jq22.com/demo/exportWord20161214/js/jquery.wordexport.js

 

2、表格导出

一开始我同样介绍一个Jquery插件，名字叫做Tableexport。它可以将HTML中Table标签下的表格数据以多种格式下载到本地。

2.1、插件引用

 

<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
<script type="text/javascript" src="tableExport.min.js"></script>

 

2.2、使用

// CSV format
$('#tableID').tableExport({type:'csv'});

// Excel 2000 html format
$('#tableID').tableExport({type:'excel'});

// XML Spreadsheet 2003 file format with multiple worksheet support
$('table').tableExport({type:'excel',
                        excelFileFormat:'xmlss',
                        worksheetName: ['Table 1','Table 2', 'Table 3']});

// PDF export using jsPDF only
$('#tableID').tableExport({type:'pdf',
                           jspdf: {orientation: 'p',
                                   margins: {left:20, top:10},
                                   autotable: false}
                          });

// PDF format using jsPDF and jsPDF Autotable 
$('#tableID').tableExport({type:'pdf',
                           jspdf: {orientation: 'l',
                                   format: 'a3',
                                   margins: {left:10, right:10, top:20, bottom:20},
                                   autotable: {styles: {fillColor: 'inherit', 
                                                        textColor: 'inherit'},
                                               tableWidth: 'auto'}
                                  }
                          });

// PDF format with callback example
function DoCellData(cell, row, col, data) {}
function DoBeforeAutotable(table, headers, rows, AutotableSettings) {}
$('table').tableExport({fileName: sFileName,
                        type: 'pdf',
                        jspdf: {format: 'bestfit',
                                margins: {left:20, right:10, top:20, bottom:20},
                                autotable: {styles: {overflow: 'linebreak'},
                                            tableWidth: 'wrap',
                                            tableExport: {onBeforeAutotable: DoBeforeAutotable,
                                                          onCellData: DoCellData}}}
                       });

 

2.3、资源下载

https://github.com/hhurz/tableExport.jquery.plugin

 

除去这个插件，我自己介绍一种将Jquery-EasyUI中DataGrid中数据以Excel形式下载到本地的方法。实例代码如下：

$("#SaveBtn").click(function() {  
            var data = JSON.stringify($('#table').datagrid('getData').rows);  
            alert(data);  
            if (data == '')  
                return;  
            JSONToCSVConvertor(data, "Download", true);  
        });  
        
        function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {  
            //If JSONData is not an object then JSON.parse will parse the JSON string in an Object  
            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData)  
                    : JSONData;  
  
            var CSV = '';  
            //Set Report title in first row or line  
  
//          CSV += ReportTitle + '\r\n\n';  
  
            //This condition will generate the Label/Header  
            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  
                    row += index + ',';  
                }  
  
                row = row.slice(0, -1);  
  
                //append 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 = "MyReport_";  
            //this will remove the blank-spaces from the title and replace it with an underscore  
            fileName += ReportTitle.replace(/ /g, "_");  
  
            //Initialize file format you want csv or xls  
            var uri = 'data:text/csv;charset=utf-8,' + escape(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);  
        }  

 

　　注释：这里主要用到的datagrid的data属性获取表的字符串，在将字符串编辑后赋予到HTML的标签<a>，以CSV的格式下载到本地。

3、图片导出

在Web前端中，可以展现图片形式的有img、canvas与svg三种标签形式。一般情况下，都可以将其转换<a>标签的形式，以jpg格式下载下来。

4、甭管是啥，都以图片导出

这里介绍的是一种插件叫做html2canvas。

4.1、插件引用

 

<script type="text/javascript" src="../../mui.js" ></script>
<script type="text/javascript" src="../../html2canvas.js" ></script>

 

4.2、使用

html2canvas(document.getElementsByClassName("pvtRendererArea"), {
          allowTaint: true,
          taintTest: false,
          onrendered: function(canvas) {
                            canvas.id = "mycanvas";
                            var image = new Image();
                            ////指定格式PNG
                            //image.src = canvas.toDataURL("image/jpg");

                            //console.log("ASd");
                            //document.body.appendChild(canvas);
                            //生成base64图片数据
                            image.src = canvas.toDataURL("image/jpg");
                            //window.open(image);
    
                            var link = document.createElement("a");  
                            link.href = image.src;  
  
                            //set the visibility hidden so it will not effect on your web-layout  
                            link.style = "visibility:hidden";  
                            link.download = "pivotTable" + ".jpg";  
  
                            //this part will append the anchor tag and remove it after automatic click  
                            document.body.appendChild(link);  
                            link.click();  
                            document.body.removeChild(link);  
                               
                        }
});

 

4.3、资源下载

http://html2canvas.hertzen.com/

 

以上就是Web端数据导出的功能介绍，后续继续补充。。。