Is it possible to use any HTML5 fanciness to export local storage to Excel?

I think you’re misunderstanding the answer to the question you linked to, it’s suggesting you use a Data URI for export.

Excel is a bit of a complicated target to aim for as the file format is itself binary (or OOXML). If you just want something that opens in Excel then you can export the more straightforward CSV as a data URI. The following code is a bit rough and ready and has only been tested in Firefox:

function exportData() {
    var data="";
    for (var i=1;i<=2;i++) {
        var sep = '';
        for (var j=1;j<=4;j++) {
            data +=  sep + document.getElementById(i + '_' + j).value;
            sep = ',';
        }
        data += '\r\n';
    }
    var exportLink = document.createElement('a');
    exportLink.setAttribute('href', 'data:text/csv;base64,' + window.btoa(data));
    exportLink.appendChild(document.createTextNode('test.csv'));
    document.getElementById('results').appendChild(exportLink);
}

Here’s the page markup:

<input type="number" id="1_1" value="2">,
<input type="number" id="1_2" value="1">,
<input type="number" id="1_3" value="4">,
<input type="number" id="1_4" value="3">
<br>
<input type="number" id="2_1" value="1">,
<input type="number" id="2_2" value="2">,
<input type="number" id="2_3" value="3">,
<input type="number" id="2_4" value="4">
<br>
<button onclick="exportData()">Export as CSV</button>
<div id="results"></div>

Demo here. Click the button you get a link, click the link and you get a file. Change the values, click the link again and you get a different file. Firefox made me select Excel every time to open it but I don’t know whether that’s my configuration or a general issue.

CSV in Excel 2007
(source: boogdesign.com)

Like I said, only tested in Firefox, and it will only work in browsers which support Data URIs. You also need the window.btoa() function or implement your own base64 encoder.

Leave a Comment