为什么bgcolor停止HTML表格导出到Excel？

Question

我是JS新手。我已经能够使用以下JS代码成功导出HTML表格。然而，每当我在表格中的任何字段上使用背景色时，无论是在 <td> 或 <tr>在导出的excel文件中，该字段的内容和表格的所有后续数据字段都不会出现。该命令是否会在导出的excel文件中出现？bgcolor="#CCD1D1" 妨碍 tableSelect.outerHTML?

如何解决导出HTML表格中某一行（或单元格）有灰色阴影的问题？

下面的HTML导出了所有数据，直到row2 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>