Chrome / JQuery का उपयोग करके एक्सेल में HTML टेबल डेटा निर्यात करें क्रोम ब्राउज़र में ठीक से काम नहीं कर रहा है

Question 1

मेरे पास वेग टेम्पलेट में एक HTML तालिका है। मैं सभी ब्राउज़र के साथ जावा स्क्रिप्ट या jquery, comatibale का उपयोग कर एक्सेल को html टेबल डेटा निर्यात करना चाहता हूं। मैं स्क्रिप्ट का उपयोग कर रहा हूं

<script type="text/javascript">
function ExportToExcel(mytblId){
       var htmltable= document.getElementById('my-table-id');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

यह स्क्रिप्ट मोज़िला फ़ायरफ़ॉक्स में ठीक काम करती है , यह एक्सेल के एक संवाद बॉक्स के साथ पॉप-अप करती है और विकल्प खोलने या सहेजने के लिए कहती है। लेकिन जब मैंने क्रोम ब्राउज़र में समान स्क्रिप्ट का परीक्षण किया , तो यह अपेक्षित रूप से काम नहीं कर रहा है, जब बटन पर क्लिक किया जाता है तो एक्सेल के लिए कोई पॉप-अप नहीं होता है। डेटा "फ़ाइल प्रकार: फ़ाइल" के साथ एक फ़ाइल में डाउनलोड हो जाता है, जैसे कोई विस्तार नहीं है । xls क्रोम कंसोल में कोई त्रुटि नहीं है।

Jsfiddle उदाहरण:

http://jsfiddle.net/insin/cmewv/

यह मोज़िला में ठीक काम करता है लेकिन क्रोम में नहीं।

क्रोम ब्राउज़र टेस्ट केस:

पहली छवि: मैं निर्यात पर एक्सेल बटन पर क्लिक करता हूं

और परिणाम:

परिणाम

Question 2

एक्सेल एक्सपोर्ट स्क्रिप्ट IE7 +, फ़ायरफ़ॉक्स और क्रोम पर काम करता है।

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</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

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

बस एक खाली आइफ्रेम बनाएं:

<iframe id="txtArea1" style="display:none"></iframe>

इस फ़ंक्शन को कॉल करें:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Question 3

Datatable प्लगइन उद्देश्य को सबसे अच्छा हल करता है और हमें एक्सेल, पीडीएफ, पाठ में HTML तालिका डेटा निर्यात करने की अनुमति देता है। आसानी से विन्यास करने योग्य।

नीचे दिए गए संदर्भ योग्य लिंक का पूरा उदाहरण देखें:

https://datatables.net/extensions/buttons/examples/html5/simple.html

(डेटाटेबल संदर्भ साइट से स्क्रीनशॉट)

Question 4

यह मदद कर सकता है

function exportToExcel(){
var htmls = "";
            var uri = 'data:application/vnd.ms-excel;base64,';
            var 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>'; 
            var base64 = function(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            };

            var format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            };

            htmls = "YOUR HTML AS TABLE"

            var ctx = {
                worksheet : 'Worksheet',
                table : htmls
            }


            var link = document.createElement("a");
            link.download = "export.xls";
            link.href = uri + base64(format(template, ctx));
            link.click();
}

Question 5

http://wsnippets.com/export-html-table-data-excel-sheet-use-jquery/ इस लिंक को आज़माएं इससे आपकी समस्या दूर हो सकती है

यहां छवि विवरण दर्ज करें

Question 6

उपयोग करने के बजाय window.openआप onclickईवेंट के साथ लिंक का उपयोग कर सकते हैं ।
और आप html टेबल को उरई में रख सकते हैं और डाउनलोड करने के लिए फ़ाइल नाम सेट कर सकते हैं।

लाइव डेमो :

function exportF(elem) {
  var table = document.getElementById("table");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url 
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls"); // Choose the file name
  return false;
}

<table id="table" border="1">
  <tr>
    <td>
      Foo
    </td>
    <td>
      Bar
    </td>
  </tr>
</table>

<a id="downloadLink" onclick="exportF(this)">Export to excel</a>

स्निपेट का विस्तार करें

Question 7

TableExport - xlsx, xls, csv और txt फ़ाइलों में HTML तालिकाओं को निर्यात करने के लिए सरल, आसानी से लागू होने वाली लाइब्रेरी।

इस लाइब्रेरी का उपयोग करने के लिए, निर्माता को सरल कॉल करें TableExport:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

आपकी तालिका, बटन और निर्यात किए गए डेटा के रूप और स्वरूप को अनुकूलित करने के लिए अतिरिक्त गुण पारित किए जा सकते हैं। अधिक जानकारी के लिए यहां देखें

Question 8

इन उदाहरणों का मेरा विलय:

https://www.codexworld.com/export-html-table-data-to-excel-use-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

function exportTableToExcel(tableId, filename) {
    let dataType = 'application/vnd.ms-excel';
    let extension = '.xls';

    let base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    };

    let 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>';
    let render = function(template, content) {
        return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
    };

    let tableElement = document.getElementById(tableId);

    let tableExcel = render(template, {
        worksheet: filename,
        table: tableElement.innerHTML
    });

    filename = filename + extension;

    if (navigator.msSaveOrOpenBlob)
    {
        let blob = new Blob(
            [ '\ufeff', tableExcel ],
            { type: dataType }
        );

        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        let downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);

        downloadLink.download = filename;

        downloadLink.click();
    }
}

Question 9

ऐसा करने के लिए आप शील्डयूआई जैसी लाइब्रेरी का उपयोग कर सकते हैं।

यह एक्सएमएल और एक्सएलएसएक्स दोनों को व्यापक रूप से उपयोग किए जाने वाले एक्सेल स्वरूपों को निर्यात करने का समर्थन करता है।

यहाँ अधिक जानकारी: http://demos.shieldui.com/web/grid-general/export-to-excel

Question 10

11:59 पर जुआन 6 '14 से संप्रदाय के उत्तर के बारे में:

मैंने एक्सेल डेटा को अधिक प्रदर्शित करने के लिए 20px के फ़ॉन्ट-आकार के साथ एक सीएसएस शैली सम्मिलित की है। सैंपोप्स कोड में प्रमुख <tr>टैग गायब हैं, इसलिए मैं पहली बार हेडलाइन को आउटपुट करता हूं और एक लूप के भीतर अन्य तालिकाओं की तुलना में।

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // 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 ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

     // if Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
    }  
    else // other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Question 11

 function exportToExcel() {
        var tab_text = "<tr bgcolor='#87AFC6'>";
        var textRange; var j = 0, rows = '';
        tab = document.getElementById('student-detail');
        tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
        var tableData = $('#student-detail').DataTable().rows().data();
        for (var i = 0; i < tableData.length; i++) {
            rows += '<tr>'
                + '<td>' + tableData[i].value1 + '</td>'
                + '<td>' + tableData[i].value2 + '</td>'
                + '<td>' + tableData[i].value3 + '</td>'
                + '<td>' + tableData[i].value4 + '</td>'
                + '<td>' + tableData[i].value5 + '</td>'
                + '<td>' + tableData[i].value6 + '</td>'
                + '<td>' + tableData[i].value7 + '</td>'
                + '<td>' +  tableData[i].value8 + '</td>'
                + '<td>' + tableData[i].value9 + '</td>'
                + '<td>' + tableData[i].value10 + '</td>'
                + '</tr>';
        }
        tab_text += rows;
        var data_type = '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 border="2px">{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 ctx = {
            worksheet: "Sheet 1" || 'Worksheet',
            table: tab_text
        }
        document.getElementById("dlink").href = data_type + base64(format(template, ctx));
        document.getElementById("dlink").download = "StudentDetails.xls";
        document.getElementById("dlink").traget = "_blank";
        document.getElementById("dlink").click();
    }

स्निपेट का विस्तार करें

यहां मान 1 से 10 कॉलम नाम हैं जो आपको मिल रहे हैं

Question 12

आप tableToExcel.js का उपयोग कर सकते हैं एक्सेल फाइल में टेबल को एक्सपोर्ट करने के का ।

यह निम्नलिखित तरीके से काम करता है:

1)। अपने प्रोजेक्ट / फाइल में इस सीडीएन को शामिल करें

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

2)। या तो जावास्क्रिप्ट का उपयोग करना:

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3)। या Jquery का उपयोग करके

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

आप किसी अन्य जानकारी के लिए इस github लिंक का संदर्भ ले सकते हैं

https://github.com/linways/table-to-excel/tree/master

या लाइव उदाहरण को संदर्भित करने के लिए निम्न लिंक पर जाएं

https://codepen.io/rohithb/pen/YdjVbb

आशा है कि यह किसी की मदद करेगा :-)

Question 13

मेरे संस्करण @sampopes जवाब

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

एक iframe की आवश्यकता है

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

प्रयोग

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});