javascript - Angularjs का उपयोग कर एक्सएलएस में निर्यात करें




excel xls (6)

अनुकूलित फ़ाइल नाम के साथ नीचे आज़माएं:

$scope.exportData= function(){                  
    var uri = 'data:application/vnd.ms-excel;base64,'
          , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
          , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
          , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }

          var table = document.getElementById("searchResult");
          var filters = $('.ng-table-filters').remove();
          var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
          $('.ng-table-sort-header').after(filters) ;          
          var url = uri + base64(format(template, ctx));
          var a = document.createElement('a');
          a.href = url;
          a.download = 'Exported_Table.xls';
          a.click();        
};

मैं कोणीय जेएस ऐप पर काम कर रहा हूं और मैं ऐसी स्थिति में फंस गया जिसमें मुझे कोणीय जेएस का उपयोग करके एक्सएलएस में डेटा निर्यात करना है। मैंने निर्यात कार्यक्षमता या कोणीय जेएस के लिए किसी लाइब्रेरी के लिए इंटरनेट पर बहुत कुछ खोजा है, इसलिए मैं इसे कर सकता हूं या कम से कम मैं यह जान सकता हूं कि निर्यात कैसे करें। मेरे पास यहां दिखाने के लिए कोई कोड या काम नहीं है।

मुझे सुझाव चाहिए कृपया इस पर मेरी सहायता करें।

अग्रिम में धन्यवाद।

अद्यतन करें:

मेरे पास एक डेटा है जो ऑब्जेक्ट्स की एक सरणी है और मैं एक टेबल में यूआई पर फिर से चल रहा हूं। मेरा बैकएंड node.js और frontend कोणीय जेएस हैं।

मेरी समस्या यह है कि यदि हमारे पास सर्वर से डेटा है और मैं यूआई पर उपयोग कर रहा हूं, तो मैं कोणीय जेएस का उपयोग करके एक्सएलएस को निर्यात करने के लिए उसी डेटा का उपयोग कैसे कर सकता हूं। मैं डेटा निकालने और निर्यात करने के लिए बैकएंड पर फिर से कॉल नहीं करना चाहता हूं।

मौजूदा तालिका में, उपयोगकर्ता Xls को डेटा निकालने के लिए चेकबॉक्स (पंक्तियों या सभी पंक्तियों की संख्या) का चयन कर सकते हैं।

Node.js में मैंने नोड मॉड्यूल का उपयोग किया है जिसका नाम है: एक्सेल और यह nodemodules साइट पर उपलब्ध है।

मेरा डेटा ऐसा है:

"data": [
    {
        "Name": "ANC101",
        "Date": "10/02/2014",
        "Terms": ["samsung", "nokia": "apple"]
    },{
        "Name": "ABC102",
        "Date": "10/02/2014",
        "Terms": ["motrolla", "nokia": "iPhone"]
    }
]

मैं angularjs या किसी भी कोणीय पुस्तकालय का उपयोग कर समाधान चाहते हैं।


आप Alasql जावास्क्रिप्ट लाइब्रेरी को आज़मा सकते हैं जो Angular.js डेटा के आसान निर्यात के लिए XLSX.js लाइब्रेरी के साथ मिलकर काम कर सकता है। यह exportData () फ़ंक्शन के साथ नियंत्रक का एक उदाहरण है:

function myCtrl($scope) {
  $scope.exportData = function () {
    alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
  };

  $scope.items = [{
    name: "John Smith",
    email: "[email protected]",
    dob: "1985-10-10"
  }, {
    name: "Jane Smith",
    email: "[email protected]",
    dob: "1988-12-22"
  }];
}

JsFiddle में इस उदाहरण के लिए पूर्ण HTML और जावास्क्रिप्ट कोड देखें।

रंगीन कोशिकाओं के साथ एक और उदाहरण अद्यतन

इसके अलावा आपको दो पुस्तकालयों को शामिल करने की आवश्यकता है:


ऐसा करने का एक सस्ता तरीका है <table> उत्पन्न करने के लिए कोणीय का उपयोग करना और फ़ाइल को डाउनलोड करने के लिए .xls फ़ाइल के रूप में तालिका आउटपुट करने के लिए FileSaver.js का उपयोग करना है। एक्सेल स्प्रेडशीट के रूप में HTML तालिका को खोलने में सक्षम होगा।

<div id="exportable">
    <table width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>DoB</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.dob | date:'MM/dd/yy'}}</td>
            </tr>
        </tbody>
    </table>
</div>

निर्यात कॉल:

var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "Report.xls");
};

डेमो: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

चेकबॉक्स कार्यक्षमता और प्रश्न के डेटा के साथ अद्यतन डेमो। डेमो: http://jsfiddle.net/TheSharpieOne/XNVj3/3/


जब मुझे कुछ समान चाहिए, तो एनजी-सीएसवी और अन्य समाधान यहां पूरी तरह से मदद नहीं करते थे। मेरा डेटा $ दायरे में था और इसमें कोई सारणी नहीं थी। इसलिए, मैंने शीट.जेएस (xslsx.js) और FileSaver.js का उपयोग कर एक्सेल को दिए गए डेटा को निर्यात करने का निर्देश बनाया।

यहां मेरा समाधान पैक किया गया है।

उदाहरण के लिए, डेटा है:

$scope.jsonToExport = [
    {
      "col1data": "1",
      "col2data": "Fight Club",
      "col3data": "Brad Pitt"
    },
    {
      "col1data": "2",
      "col2data": "Matrix Series",
      "col3data": "Keanu Reeves"
    },
    {
      "col1data": "3",
      "col2data": "V for Vendetta",
      "col3data": "Hugo Weaving"
    }
];

मुझे अपने नियंत्रक में अपने निर्देश के लिए डेटा को सरणी के सरणी के रूप में तैयार करना था:

$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
  $scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});

अंत में, मेरे टेम्पलेट में निर्देश जोड़ें। यह एक बटन दिखाता है। ( बेवकूफ देखें)।

<div excel-export export-data="exportData" file-name="{{fileName}}"></div>

यदि आप अपना डेटा एनजी-ग्रिड में लोड करते हैं, तो आप सीएसवी निर्यात प्लगइन का उपयोग कर सकते हैं। प्लगइन एक href टैग के अंदर सीएसवी के रूप में ग्रिड डेटा के साथ एक बटन बनाता है।

http://angular-ui.github.io/ng-grid/

https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js

लाइब्रेरी के रूप में लिंक अपडेट करने का नाम बदला गया:

गिथब लिंक: https://github.com/angular-ui/ui-grid

लाइब्रेरी पेज: http://ui-grid.info/

सीएसवी निर्यात पर दस्तावेज़ीकरण: http://ui-grid.info/docs/#/tutorial/206_exporting_data


$scope.ExportExcel= function () { //function define in html tag                          

                        //export to excel file
                        var tab_text = '<table border="1px" style="font-size:20px" ">';
                        var textRange;
                        var j = 0;
                        var tab = document.getElementById('TableExcel'); // id of table
                        var lines = tab.rows.length;

                        // the first headline of the table
                        if (lines > 0) {
                            tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
                        }

                        // table data lines, loop starting from 1
                        for (j = 1 ; j < lines; j++) {
                            tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";                                
                        }

                        tab_text = tab_text + "</table>";
                        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");          //remove if u want links in your table
                        tab_text = tab_text.replace(/<img[^>]*>/gi, "");             // remove if u want images in your table
                        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

                        // console.log(tab_text); // aktivate so see the result (press F12 in browser)               
                        var fileName = 'report.xls'                            
                        var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) 

                        if (window.navigator.msSaveBlob) { // IE 10+
                            window.navigator.msSaveOrOpenBlob(exceldata, fileName);
                            //$scope.DataNullEventDetails = true;
                        } else {
                            var link = document.createElement('a'); //create link download file
                            link.href = window.URL.createObjectURL(exceldata); // set url for link download
                            link.setAttribute('download', fileName); //set attribute for link created
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }

                    }

        //html of button 





xls