0

I want to export an html table to excel I am doing it like described in here: Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browse.

It works fine but when I the file with exel I get the message

The file you are trying to open is in the different format than the specified by the file extension...

after I select Yes the table opens without problems but the error message is rely annoying dos someone know how to fix this?

I google a little but I found some things but nothing seams to work.

I tried to change the file extension from xls to xlsx but then I cant even open it.

1
  • 1
    The easiest way to do that you can find here
    – mmushtaq
    Commented Jul 21, 2016 at 12:13

3 Answers 3

2

The problem is that you are telling Excel to open an xls file, but the content is html. The only way to get around it is creating a real Excel document instead of an html chunk.

0

You can use datatables.net library for this.

0

I am creating first html table from Json Data and add this table into the div(this div is hidden). and after then I export html table. Open in JSFiddle Open JSFiddle!

Html Code

    <label for="txtExcelFileName">Excel File Name</label><br/>
    
    <input type="text" class="form-control" id="txtExcelFileName" value="fileName" aria-describedby="Excel file Name" placeholder="Excel File Name without Extension"><br/>
    
    <button type="button" class="btn btn-success" id="btnExport">Export</button>
    <div style="display:none;" id="example">
    </div>

Jquery Code

    var mydata=[
    {SrNo: 1, ProductName: "Ipnone 13 Pro 128gb", Price: 90000},
  {SrNo: 2, ProductName: "Iphone 13 Pro Max 128gb", Price: 120000},
  {SrNo: 3, ProductName: "Iphone 12 pro 128gb", Price: 75000},
  {SrNo: 4, ProductName: "Iphone 12 pro Max 128gb", Price: 85000}
];
$("#btnExport").click(function () {                
        if(mydata.length<1)
        {
            alert("There are no data in grid. First click on refresh button and after you can export xlsx...");
            return;
        }
        
        var _fileName=$("#txtExcelFileName").val();

        if(_fileName.length<=5)
        {
            alert("Please enter file name more then 10 character...");
            return;
        }
        _fileName=_fileName+".xls";
        ConvertDataStructureToTable(mydata);
        tableToExcel('tabledata', 'Stock Analysis', _fileName);

    });
    
function ConvertDataStructureToTable(mydata) {
        var result = "<table id='tabledata'>";

        result += "<thead><tr>";
        result += "<th>SrNo</th>";
        result += "<th>Product Name</th>";
        result += "<th>Price</th>";
        result += "</tr></thead>";
        result += "<tbody>";
        $(mydata).each(function (key, value1) {
            //console.log(key);
            //console.log(value1);
            result += "<tr>";
                     result += "<td  style='mso-number-format:\"\@\"'>"+value1["SrNo"]+"</td>";
            result += "<td  style='mso-number-format:\"\@\"'>"+value1["ProductName"]+"</td>";
            result += "<td>"+value1["Price"]+"</td>";
            result += "</tr>";
        });
        result += "</tbody>";

        result += "</table>";

        $("#example").html("");
        $("#example").html(result);
        //console.log("..Called..");
        //console.log(result);
        //return result;
    }

    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, filename) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }

            var link = document.createElement('a');
            link.href = uri + base64(format(template, ctx));
            link.download = filename;
            link.traget = "_blank";
            $("#example").html(link);
            link.click();  


        }
    })();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.