Почему bgcolor останавливает HTML экспорт таблицы в Excel?

Question

Я новичок в JS. Мне удалось успешно экспортировать HTML таблицы, используя следующий код JS. Однако всякий раз, когда я использую цвет фона для любого поля таблицы, либо <td>, либо <tr>, содержимое поля и все последующие поля данных таблицы не отображаются в экспортированном файле Excel. Влияет ли команда bgcolor="#CCD1D1" на tableSelect.outerHTML?

Как мне обойтись при экспорте таблицы HTML, в которой строка (или ячейка) закрашена серым?

ниже HTML экспортирует все данные до строки 2 col1. Если я удалю bgcolor = "# CCD1D1", вся таблица будет правильно экспортирована

    <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>

JavaScript, используемый для экспорта, выглядит следующим образом (он отлично работает, если в таблице не используется затенение фона) :

    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

Я собираюсь догадаться, что, поскольку # имеет особое значение в URL-адресе, поэтому при добавлении его как части download.href оно усекает содержимое до этой точки.

Вероятно, вам понадобится добавить класс, чтобы назначить цвет для bgcolor через CSS.

Так что в вашем HTML вместо <td bgcolor="#CCD1D1">Row2 Col2</td>

у вас может быть что-то вроде:

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

и тогда у вашего CSS будет что-то вроде

.mygray{
   background-color: #CCD1D1;
}

См. Демонстрацию ниже:

.mygray {
  background-color: #CCD1D1;
}

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

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