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




excel xls (7)

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

$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 या किसी भी कोणीय पुस्तकालय का उपयोग कर समाधान चाहते हैं।


मुझे यह समस्या थी और मैंने CSV फ़ाइल में एक HTML तालिका निर्यात करने के लिए एक टूल बनाया। FileSaver.js के साथ मेरी समस्या यह थी कि यह टूल HTML प्रारूप के साथ तालिका को पकड़ता है, यही कारण है कि कुछ लोग एक्सेल या Google में फ़ाइल नहीं खोल सकते हैं। आपको बस जेएस फ़ाइल निर्यात करना है और फिर फ़ंक्शन को कॉल करना है। यह github url https://github.com/snake404/tableToCSV अगर किसी को भी एक ही समस्या है।


ऐसा करने का एक सस्ता तरीका है <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/


यदि आप अपना डेटा एनजी-ग्रिड में लोड करते हैं, तो आप सीएसवी निर्यात प्लगइन का उपयोग कर सकते हैं। प्लगइन एक 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


जब मुझे कुछ समान चाहिए, तो एनजी-सीएसवी और अन्य समाधान यहां पूरी तरह से मदद नहीं करते थे। मेरा डेटा $ दायरे में था और इसमें कोई सारणी नहीं थी। इसलिए, मैंने शीट.जेएस (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>

$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 


एक प्रारंभिक बिंदु इस निर्देश का उपयोग करने के लिए हो सकता है (एनजी-सीएसवी) बस फ़ाइल को सीएसवी के रूप में डाउनलोड करें और यह कुछ एक्सेल समझ सकता है

http://ngmodules.org/modules/ng-csv

शायद आप इस कोड को अनुकूलित कर सकते हैं (अद्यतन लिंक):

http://jsfiddle.net/Sourabh_/5ups6z84/2/

Altough यह XMLSS लगता है (यह फ़ाइल खोलने से पहले आपको चेतावनी देता है, अगर आप फ़ाइल खोलना चुनते हैं तो यह सही तरीके से खुल जाएगा)

var tableToExcel = (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]; }) }

  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()




xls