Why is bgcolor stopping HTML table export to Excel?

Question

I am new to JS. I have been able to successfully export HTML tables using the following JS code. However, whenever I use the background color on any field in the table, either <td> or <tr>, the contents of the field and all following data fields of the table do not appear in the excel file exported. Does the command bgcolor="#CCD1D1" interfere with tableSelect.outerHTML?

How do I get around exporting an HTML table that has a row (or cell) shaded grey?

below HTML exports all data till row2 col1. If I remove the bgcolor="#CCD1D1", the entire table is properly exported

    <button onclick="exportToExcel('testData', 'test-data')">Export</button>  
      <table id = "testData" class = "table table-hover">
        <thead >
        <tr><th> One Title in Header</th></tr>  
        <tr>
          <th>Header1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4**</th>
        </tr></thead>
        <tbody>
          <tr>
            <td>Row1 Col1</td>
            <td>Row1 Col2</td>
            <td>Row1 Col3</td>
            <td>Row1 Col4</td>
          </tr>
          <tr>
            <td>Row2 Col1</td>
            <td bgcolor="#CCD1D1">Row2 Col2</td>
            <td>Row2 Col3</td>
            <td>Row2 Col4**</td>
          </tr>
        </tbody>
      </table>

The JavaScript used for exporting is as follows (it works fine where no background shading is used in the table):

    function exportToExcel(tableID, filename = ''){
        var downloadurl;
        var dataFileType = 'application/vnd.ms-excel';
        var tableSelect = document.getElementById(tableID);
        var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');

        // Specify file name
        filename = filename?filename+'.xls':'export_excel_data.xls';

        // Create download link element
        downloadurl = document.createElement("a");

        document.body.appendChild(downloadurl);

        if(navigator.msSaveOrOpenBlob){
            var blob = new Blob(['\ufeff', tableHTMLData], {
                type: dataFileType
            });
            navigator.msSaveOrOpenBlob( blob, filename);
        }else{
            // Create a link to the file
            downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;

            // Setting the file name
            downloadurl.download = filename;

            //triggering the function
            downloadurl.click();
        }
    }

Answer 1

I am going to guess that because # has a special meaning in an URL so that when you add it as part of the download.href it truncates the content until that point.

You are likely going to need to add a class to assign colour to the bgcolor via CSS.

So in your HTML, instead of <td bgcolor="#CCD1D1">Row2 Col2</td>

you can have something like:

<td class="mygray">Row2 Col2</td>

and then your CSS will have something like

.mygray{
   background-color: #CCD1D1;
}

See demo below:

.mygray {
  background-color: #CCD1D1;
}

<div class="mygray">Row2 Col2</div>
<hr/>

<table>
  <tr>
    <td class="mygray">Row2 Col2</td>
  </tr>
</table>