Export HTML table to Excel while retaining styles

1

I would like to know how to export a table from my html code to excel while maintaining the formatting (colors, borders, etc). I am using the following function:

<script type="text/javascript">

function fnExcelReport() {
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

    tab_text = tab_text + '<x:Name>Results</x:Name>';

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    tab_text = tab_text + "<table border='2px'; >";
    tab_text = tab_text + $('.biocompar').html() + $("#janelares1a").html()+ $("#janelares5a").html();
    tab_text = tab_text + '</table></body></html>';

    var data_type = 'data:application/vnd.ms-excel';

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        if (window.navigator.msSaveBlob) {
            var blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, 'Biorefinery WebTool Results.xls');
        }
    } else {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Biorefinery WebTool Results.xls');
    }

}
</script>

But when I activate the function it just sends the data from the table and creates the worksheet, but without any formatting (for example, this one from below). How to apply CSS in Excel too? Thanks!

td{
    width:30ch;
    height:3ch;
    background-color:#f0f8ff;
    border: 2px solid #151c14;
    font-family: "Muli";
    line-height: 5ch;
    color:#000;
    text-indent: 0.5em;
    transition: all 0.2s ease-in-out;

}
    
asked by anonymous 09.02.2018 / 01:41

1 answer

0

I've gotten a lot of it a couple of years ago, the only solution was to declare inline styles anyway.

I remember that I had found a constraint where Excel only recognizes one class per element and in case it would not do you to create a td{} , it would have to be .nome{} and be declared as the only class of the <td class="nome"> element. If there is more than one, he will not consider them all.

And even so, do not expect a great enrichment in the visual, after all Excel is not an html browser, try to limit yourself to the basics ... As if you were creating the style for an e-mail or Word

Ps: I'm going to look for the sources I searched for and include in the answer.

    
09.02.2018 / 02:39