将选定的表行导出到Excel

时间:2015-11-09 17:46:55

标签: javascript sapui5

我正在处理导出到Excel的功能,我只想导出表格的选定行。如何grep选定的行?

我准备了一个例子:

http://jsbin.com/xixufetuja/edit?html,js,output

1 个答案:

答案 0 :(得分:0)

LOGIC:将您选择的表格行数据转换为JSON,然后将JSON导出为CSV文件

<强> ExcelExport.view.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>

<core:View
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m"
    controllerName=" com.sap.test.view.ExcelExport " 
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Page
        title="Export Selected Table row to CSV">
        <content>
        <Table
            id="sampleTable"
            mode="MultiSelect"      
            inset="false"
            items="{
                path:'/'
            }">
            <headerToolbar>
                <Toolbar>
                    <Button
                        text="Export Green to Excel"
                        icon="sap-icon://excel-attachment"
                        press="handleSelectedRowExcelExport" />                 
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true">
                    <Text text="S1" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true">
                    <Text text="S2" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true">
                    <Text text="S3" />
                </Column>
            </columns>
            <items>
                <ColumnListItem
                    type="Active">
                    <cells>
                        <Text
                            text="{s1}" />
                        <Text
                            text="{s2}" />
                        <Text
                            text="{s3}" />
                    </cells>
                </ColumnListItem>
          </items>
    </Table>

<强> ExcelExport.controller.js

jQuery.sap.require("sap.ui.core.util.Export");
jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");


sap.ui.controller("com.sap.test.view.ExcelExport", {
var oView;  //declared global
var oModel;

onInit: function() {
    oView = this.getView();
        var demo =[
           { "s1": "1", "s2":"qwe",     "s3":"1s21"},
           { "s1": "2", "s2":"rqewr",   "s3":"12ee1"},
           { "s1": "3", "s2":"sdfsdf",  "s3":"1xxa21"}
    ];
    oModel = new sap.ui.model.json.JSONModel(demo);
    oView2.setModel(oModel);

},

handleSelectedRowExcelExport: function(){
    var oTable = oView.byId("sampleTable");
    var contexts = oTable.getSelectedContexts();
    var items = contexts.map(function(oEvent){
        return oEvent.getObject();
    });
    /*In items you will get the entire row data of selected rows in table*/

    this.JSONToCSVConvertor(items, "ExportGreen", true);
},

JSONToCSVConvertor: function(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 = '';    
        //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;
        }   

        //this trick will generate a temp "a" tag
        var link = document.createElement("a");    
        link.id="lnkDwnldLnk";

        //this part will append the anchor tag and remove it after automatic click
        document.body.appendChild(link);

        var csv = CSV;  
        blob = new Blob([csv], { type: 'text/csv' }); 
        var csvUrl = window.webkitURL.createObjectURL(blob);
        var filename = 'UserExport.csv';
        $("#lnkDwnldLnk")
        .attr({
            'download': filename,
            'href': csvUrl
        }); 

        $('#lnkDwnldLnk')[0].click();    
        document.body.removeChild(link);

    }
}

希望这会对你有所帮助。

如果您想要JSON包含大量数据的示例,请参阅以下链接 - http://jsfiddle.net/4zv6r/