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

【问题标题】：Excel Export as html fails to show borders in Excel 2016Excel 导出为 html 无法在 Excel 2016 中显示边框
【发布时间】：2016-02-28 01:22:18
【问题描述】：

我正在使用 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 的演示还显示了保存在 Excel 文件中的 html。

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>

【问题讨论】：

标签： javascript css export-to-excel

【解决方案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 中用于创建边框的不同样式。

边框厚度大于 1 像素有效

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

薄WORKS的边框厚度

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

【讨论】：

太棒了。完美运行。我试图在您的回答中修复 Excel 年份，但在 stackoverflow 中不允许进行小的更改
何塞，感谢您指出这一点。我已经更正了 Excel 的年份部分。
您好，我要显示所有带有边框的 Excel 工作表单元格。对此有什么想法吗？

【解决方案2】：

我有同样的问题，问题是你必须使用：

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

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

【讨论】：

完美的解决方案，谢谢:)

【解决方案3】：

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

因此解决它并使 excel 工作表看起来像本机一样正常，我们必须添加一些 xml 属性，就像我在下面的示例中使用的那样，使用该属性，它将显示表格出现在普通的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>

【讨论】：