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

Question

Title says it all. This question is similar, but doesn't highlight any possibilities to export the data. Thoughts?

Answer 1

I'm not aware of any Javascript libraries which can make an Excel file. But you could simply export it as HTML or CSV - note that Javascript cannot make files (yet), but the working draft of HTML caters for this: http://www.w3.org/TR/file-writer-api/

Excel is quite good at reading tables made in HTML, so you could simply do that and open the HTML file with Excel.

You can create a file for download using Downloadify: http://downloadify.info/

Answer 2

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.

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.