0

I have the below table 

<table>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>
<br/>
<table>
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<br/>
<table>
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<button>Export HTML table to CSV file</button>

and I have the below JS code

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);

        csv.push(row.join(","));        
    }

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.querySelector("button").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
    export_table_to_csv(html, "table.csv");
});

This code converts the html tables into an csv file for download. I was wondering if it's possible to somehow add some styling to it so when the csv is open in Excel it display table header with some color to it.

Here's the fiddle Fiddle

Thanks

SP1
  • 1,182
  • 3
  • 22
  • 47
  • 1
    Have a look at https://stackoverflow.com/questions/22317951/export-html-table-data-to-excel-using-javascript-jquery-is-not-working-properl - you need excel – mplungjan Jan 21 '19 at 14:46
  • Awesome..Exactly what I needed..Thank you so much – SP1 Jan 21 '19 at 15:06

1 Answers1

1

Unfortunately no! CSV files are basically raw cell data, with no formatting at all.

If you would like to have some styling you would need to learn one of the following formats. But that would be much more complicated.

  • Office Open XML — for Excel 2007 and above
  • Excel 2003 XML — for Excel 2003 and above
  • Open Document Format (.ods) — can be read by Excel 2010.
Turnip
  • 35,836
  • 15
  • 89
  • 111
MaZoli
  • 1,388
  • 1
  • 11
  • 17