Excel 导出为 html 无法在 Excel 2016 中显示边框

Question

我正在使用 JavaScript 将 html 导出到 Excel xls 文件，如以下演示所示：http://js.do/sun21170/84913。我已经使用 Google Chrome 到运行这个演示，但在 Edge 或 IE 或 FireFox 中它也应该运行。

问题是，当我在 Excel 2016 中打开导出的文件时，它显示没有任何边框，即使在导出的 html 中有 CSS 显示边框。

问题：在Excel中打开html文件时，有没有办法显示边框？在 Excel 中打开的相同 html 在浏览器中呈现时带有边框，因此边框的 CSS 是正确的。 http://js.do/sun21170/84913 中的演示还显示了 html 被保存在 Excel 文件中。

HTML 保存为 xls 文件

<html>
   <head>
      <style> table, td {border:1px solid black} table {border-collapse:collapse}</style>
   </head>
   <body>
      <table>
         <tr>
            <td>Product</td>
            <td>Customer</td>
         </tr>
         <tr>
            <td>Product1</td>
            <td>Customer1</td>
         </tr>
         <tr>
            <td>Product2</td>
            <td>Customer2</td>
         </tr>
         <tr>
            <td>Product3</td>
            <td>Customer3</td>
         </tr>
         <tr>
            <td>Product4</td>
            <td>Customer4</td>
         </tr>
      </table>
   </body>
</html>

Answer 1

经过大量研究，我终于找到了答案。好像Excel 2016 不喜欢1px 的边框粗细；任何大于 1px 的值，如 2px 或 3px 或 4px 都可以。 我不清楚为什么 Excel 2016 会这样。

显示此内容的演示位于以下 URL：http://js.do/sun21170/84961

此外，如果边框厚度以任何其他单位指定，如 em 或 pt 或 mm，则厚度为 1em 或 1mm 或 1pt 或 1mm 或 .5mm 都可以。

甚至使用 thin 或 medium 或 thick 等预定义值的边框粗细也适用于 Excel 2016。

So, the lesson I have learnt is to never specify border thickness of 1 px when using Excel.

以下 CSS 是在 Excel 2016 年用于创建边框的不同样式。

边框粗细大于 1px WORKS

var table = "<html><head><style> table, td {border:2px solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

1pt WORKS的边框粗细

var table = "<html><head><style> table, td {border:1pt solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

边框厚度为1mm WORKS

var table = "<html><head><style> table, td {border:1mm solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

边框粗细1em WORKS

var table = "<html><head><style> table, td {border:1em solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

薄作品的边框粗细

var table = "<html><head><style> table, td {border:thin solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

Answer 2

我遇到了同样的问题，问题是你必须使用：

<table border="1" style="border-collapse: collapse;"></table>

就是这样 boder 属性解决了问题。

Answer 3

添加边框并不能完全解决问题，因为它只会在数据周围做边框，除了数据整个页面仍然显示为空白。

所以解决它并使 excel sheet 看起来像原生一样正常我们必须添加一些 xml 属性 因为我在下面的示例中使用过，使用该属性，它将显示 table，因为它出现在正常的 excel 文件中。

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
    xmlns="http://www.w3.org/TR/REC-html40">

<head>
    <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Role</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>Singer</td>
            </tr>
            <tr>
                <td>Tom </td>
                <td>Actor</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Excel 导出为 html 无法在 Excel 2016 中显示边框

Excel Export as html fails to show borders in Excel 2016

javascript

css

export-to-excel