2

I tried to export my html table to excel using the code given in this Gist. But after exporting, when i opened the file, It displays the html code of the demo page in excel. Can anyone please give the correct sample of javascript used to export the html table to excel (Should be opened in office Calc too).

EDIT: Attached the image screenshot.

Attached the image screenshot.

9
  • The sample works just fine here. Win7, Google Chrome, Office 2007. I do note, the excel message-box shown when opening the file: "The file you are trying to open 'download.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?" - renaming the file to download.xlsx caused excel to refuse to open it. However, as it stands, the excel file looks just the same as the html table, complete with blue background in cell(2,2) Commented Mar 22, 2013 at 6:15
  • possibly duplicate stackoverflow.com/questions/13710405/… Commented Mar 22, 2013 at 6:41
  • also stackoverflow.com/questions/4507666/html-to-excel-export Commented Mar 22, 2013 at 6:42
  • @enhzflep - I tried using Win XP, Google chrome, Open office. Please see the attached image in edit. Commented Mar 22, 2013 at 7:01
  • I also tried the example in this link. But same result. Commented Mar 22, 2013 at 7:13

1 Answer 1

1

Here is a function I made.

Add "remove" class on elements you do not want to show in the excel.

function exportExcel(id,name){ //<table> id and filename
    var today = new Date();
    var date = ('0'+today.getDate()).slice(-2)+"-"+('0'+(today.getMonth()+1)).slice(-2)+"-"+today.getFullYear();

    var file_name = name+"_"+date+".xls"; //filename with current date, change if needed
    var meta = '<meta http-equiv="content-type" content="text/html; charset=UTF-8" />';
    var html = $("#"+id).clone();

    html.find('.remove').remove(); //add the 'remove' class on elements you do not want to show in the excel
    html.find('a').each(function() { //remove links, leave text only
        var txt = $(this).text();
        $(this).after(txt).remove();
    });
    html.find('input, textarea').each(function() { //replace inputs for their respectives texts
        var txt = $(this).val().replace(/\r\n|\r|\n/g,"<br>");
        $(this).after(txt).remove();
    });
    html.find('select').each(function() { //replace selects for their selected option text
        var txt = $(this).find('option:selected').text();
        $(this).after(txt).remove();
    });
    html.find('br').attr('style', "mso-data-placement:same-cell"); //make line breaks show in single cell
    html = "<table>"+html.html()+"</table>";

    var uri = 'data:application/vnd.ms-excel,'+encodeURIComponent(meta+html);
    var a = $("<a>", {href: uri, download: file_name});
    $(a)[0].click();
}

Call it on an event, example:

$("#export_button").click(function(e){
    exportExcel("table_id", "filename");
});
Sign up to request clarification or add additional context in comments.

1 Comment

This is really helpful and works well with something I am doing. However I also have some <div> elements within <td> elements that are creating new cells in excel using your function. I would like them to have the same behavior as you wrote out using for the <br> elements - i.e. new line within the same cell in excel. Can you help to modify this function for that?

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.