Question

我正在使用table excel并且其工作正常但是在导出到excel之后我遇到了宽度问题。该列包含图像，在打开excel后，它没有获得实际的html宽度。这是我的jquery代码。任何帮助，将不胜感激。我正在使用（http://jsfiddle.net/insin/cmewv/）

中的jquery代码

    <script type="text/javascript">
   var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<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>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()
</script>

Answer 1

在Excel中，图像不在单元格内。它们悬停在工作表上的单独图层中。这就是为什么图像宽度不会自动增加单元格宽度的原因。因此，您必须在HTML代码中指定单元格宽度。

示例：

<table id="testTable">
    <colgroup>
        <col width="150" style="vertical-align:middle;" />
        <col style="width:200px;" />
    </colgroup>
    <tr height="100">
        <td style="text-align:center; border:1px solid;">Text</td>
        <td><img src="https://www.gravatar.com/avatar/9a24eed042b7cb501ceb6ea73c09fc46?s=32&d=identicon&r=PG&f=1" width="200" height="80"/></td>
    </tr>
    <tr height="100">
        <td>Text</td>
        <td style="border:1px solid;"><img src="https://www.gravatar.com/avatar/9a24eed042b7cb501ceb6ea73c09fc46?s=32&d=identicon&r=PG&f=1" width="200" height="80"/></td>
    </tr>
</table>

JSFiddle：http://jsfiddle.net/94tLhmem/1/

某些设置来自HTML属性，其他设置仅来自内联CSS。有些在COL元素中有效，有些则无效。在这里你必须尝试更好的工作。

Answer 2

试试这个，

<table border=\"0\" cellpadding=\"0\" cellspacinxg=\"0\" width=\"100%\" style=\"border-collapse: collapse;\">
        <thead>
            <tr>
                <th align=\"center\" style=\"background:#cccccc; font-weight:bold;border-collapse: collapse;font-family: &#39;Open Sans&#39;, sans-serif; padding-top:12px; padding-bottom:12px; padding-left:16px; padding-right:16px; color:#000;\">heading1</th>
            </tr>
        </thead>
        <tbody><tr>
<td align=\"center\" style=\"border-collapse: collapse;font-family: &#39;Open Sans&#39;, sans-serif; padding-top:12px; padding-bottom:12px; padding-left:16px; padding-right:16px; color:#000; border:1px solid #cccccc;\">content1</td>
            </tr>
</tbody>
</table>

如何增加导出表的列宽

2 个答案: