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

Question

我是 JS 新手。我已经能够使用以下 JS 代码成功导出 HTML tables。但是，每当我在 table 中的任何字段上使用背景颜色时，无论是 <td> 还是 <tr>，该字段的内容和 table 的所有后续数据字段都会未出现在导出的 excel 文件中。命令 bgcolor="#CCD1D1" 会干扰 tableSelect.outerHTML 吗？

我如何解决导出具有灰色阴影行（或单元格）的 HTML table 的问题？

以下 HTML 导出所有数据，直到 row2 col1。如果我删除 bgcolor="#CCD1D1"，整个 table 被正确导出

    <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 如下（在 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

我猜是因为 # 在 URL 中有特殊含义，所以当您将它添加为 download.href 的一部分时，它会截断内容直到该点.

您可能需要添加 class 以通过 CSS 为 bgcolor 分配颜色。

所以在你的 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>

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

Why is bgcolor stopping HTML table export to Excel?

html

javascript

css

export-to-excel