39

I'm trying to use this script to save a html table to an Excel file, and it works fine, however it doesn't come up in the proper name, but rather with a random string. And I can't see why .

I call it with:

<input type="button" onclick="tableToExcel('tablename', 'name')" value="Export to Excel">

code

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))
}
})()
4
  • You are passing parameters 'name' and 'tablename' to tableToExcel but the function doesn't declare any parameters Commented Jun 15, 2013 at 18:35
  • do you know how to fix this? My js is not very great :P
    – Coolcrab
    Commented Jun 15, 2013 at 18:53
  • @Yuriy Galanter - the variable tableToExcel is set to the return value of an unnamed function which gets executed immediately as the page loads. The return value is a reference to the anonymous function function(table,name), so when you call tableToExcel it's really this function which gets executed. Commented Jun 16, 2013 at 0:20
  • @TimWilliams yup figured it out already, now figuring answer to the question Commented Jun 16, 2013 at 0:27

5 Answers 5

66

You can use download attribute supported by modern browsera for a anchor element. First modify your HTML by adding an invisible anchor:

<a id="dlink"  style="display:none;"></a>

<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel">

Notice also that the call to function tableToExcel now has 3rd parameter - where you specify file name.

Now use this modified code of your original function:

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 }

            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();

        }
    })()

Notice last 3 code lines: Instead of assigning URL to window - they assign it to the new anchor, then use new download attribute to force download as the given file name and then simple call click() method of the anchor.

Give it a try.

Update - For supporting utf-8 characters

As per the comment below by @WorldSEnder, a simple meta tag in the template would make the excel support utf-8 characters like Hindi.

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"><meta charset="utf-8"/><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>'
11
  • 2
    Awesome! The name works, but now I'm getting this error: The file you are trying to open, 'name.xls', is a different format than specified in the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file.
    – Coolcrab
    Commented Jun 16, 2013 at 9:46
  • 2
    This is normal, you should've gotten this before as well. This is happening because the file is not a real Excel, but rather XML in disguise. But after that warning the file should be opening OK anyway. You can play with file extension to try to get rid of the warning (e.g. change it to .XML etc.) Commented Jun 16, 2013 at 12:02
  • 1
    Hi, I know this is an older post but I get an error saying Object doesn't support property or method 'btoa'.
    – seroth
    Commented Feb 27, 2014 at 15:41
  • 1
    Check my answer here stackoverflow.com/questions/22317951/…
    – sampopes
    Commented Apr 29, 2015 at 10:56
  • 1
    @Yuriy...Similar like this I have three tables and I want those tables to be the worksheets in the same excel file....I have tried this http://stackoverflow.com/a/29717451/6547301 but table styling is not retained, I want to retain the styles of the table in excel sheet
    – Venkat
    Commented Sep 17, 2016 at 11:57
15

The 3 code lines above doesn't work in my case, but here what I found and I hope it could help.

function tableToExcel(table, name, filename) {
        let 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"><title></title><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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>', 
        base64 = function(s) { return window.btoa(decodeURIComponent(encodeURIComponent(s))) },         format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; })}
        
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

        var link = document.createElement('a');
        link.download = filename;
        link.href = uri + base64(format(template, ctx));
        link.click();
}
<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<input 
  type="button" 
  onclick="tableToExcel('myTable', 'name', 'myfile.xls')" 
  value="Export to Excel"
>
<table id="myTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

3
0

Try this simple method.

Keep this button wherever you want to display the Export Button

<button id="btnExport" onclick="fnExcelReport('myExcelFile.xlsx');" class="btn btn-sm btn-primary"> Export </button>

Add these lines to the bottom of the page

<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<script>
         function fnExcelReport(fileName) {
                    let table = document.getElementsByTagName("table");
                    return TableToExcel.convert(table[0], {
                        name: fileName,
                        sheet: {
                            name: 'Sheet 1'
                        }
                    });
                }
</script>
0

On the event of click, Change tableToExcel function to just send a desired file name with an extention of .xlsx:

<input type="button" onclick="tableToExcel('tablename.xlsx')" value="Export to Excel">

And the tableToExcel function can look like this:

<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<script>
     function tableToExcel(fileName) {
                let table = document.getElementById('table');
                return TableToExcel.convert(table, {
                    name: fileName,
                    sheet: {
                        name: 'Sheet 1'
                    }
                });
            }
</script>
0

You can download the HTML table as an Excel file using only JavaScript. Here is the simple code sample.

<html>
    <head>
        <title>
            HTML To Excel Test
        </title>
    </head>
    <body>
        <div id="table-conatainer">
            <table class="striped">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Product Name</th>
                        <th>Price</th>
                        <th>Model</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>GIZMORE Multimedia Speaker with Remote Control, Black</td>
                        <td>2300</td>
                        <td>2020</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Black Google Nest Mini</td>
                        <td>3400</td>
                        <td>2021</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button onclick="exportToExcel()">Export To Excel</button>
        <script>
            function exportToExcel() {
                var location = 'data:application/vnd.ms-excel;base64,';
                var excelTemplate = '<html> ' +
                    '<head> ' +
                    '<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/> ' +
                    '</head> ' +
                    '<body> ' +
                    document.getElementById("table-conatainer").innerHTML +
                    '</body> ' +
                    '</html>';
                window.location.href = location + window.btoa(excelTemplate);
            }
        </script>
    </body>
</html>

Here is a codepen link. https://codepen.io/xorozo/pen/yLdNVoo

Not the answer you're looking for? Browse other questions tagged or ask your own question.