我需要的背景渐变添加到网页一些td和th元素它获取转换为PDF格式，但我碰到wkhtmltopdf一些非常奇怪的行为，所以，当我这样做：如何获得wkhtmltopdf以显示th和td背景渐变？

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
th { 
 
    height: 60px; 
 
    border: 1px solid Black; 
 
} 
 

 
td { 
 
    height: 100px; 
 
    background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); 
 
    border: 1px solid Black; 
 
}

<table> 
 
    <tr> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table>

th的高度似乎以某种方式侵占了每个后续td。如果我删除th或将其高度设置为整个td高度的倍数，那么一切都很好。

任何人都对这里发生了什么有所了解？我的HTML很难改变，所以我希望能够单独使用CSS或wkhtmltopdf设置来实现这个功能。

编辑：

一些截图之前赏金到期：

这里是它的外观在WebKit浏览器：

enter image description here

这里是wkhtmltopdf做它：

enter image description here

还有一个观察：它不一定是导致问题的原因，因为将其更改为类似的目标<td class='th'>将会产生相同的效果。

来源

2014-12-19 stovroz

我不认为这将工作不幸。但是，您仍然可以通过使用图像作为背景来实现几乎仅限CSS的解决方案。这对你有用吗？ – Nenotlep 2014-12-23 09:01:56

带有图像解决方案的CSS对我来说已经足够好了，但是也可以用这种方法观察到类似的突变渲染。 – stovroz 2014-12-23 16:32:13

以下两点对我来说都是一样的：'background：-webkit-gradient（线性，左上，右下，色阻（0％，rgba（25,25,175,1）），color-stop（（100％，rgba（93,168,226,1）））;' 和'background：-webkit-gradient（linear，left top （rgba（25,25,175,1））到（rgba（93,168,226,1）））;' – rainabba 2016-02-04 00:18:47

-1

使用内嵌的css转换为pdf的这个页面。

来源

2014-12-26 05:40:43

CSS已经内联。 – stovroz 2014-12-28 20:05:11

我已经看到了其他WKHtmltoPdf问题的建议，我认为它可能已经过时，因为它没有在我尝试过的任何情况下（页眉/页脚）工作。我一直在使用12.1或更新的版本。 – rainabba 2016-02-04 00:16:59

您对此有何想法？

<style> 
    .table { 
     width: 100%; 
     display:table; 
     border-collapse: collapse; 
    } 

    .tr { 
     height: 60px; 
     display:table-row; 
    border: 1px solid Black; 
    } 

    .td, .th{ 
     height: 60px; 
     border: 1px solid Black; 
     display:table-cell; 
     background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); 
    } 
</style> 
    <div class="table"> 
     <div class="tr"> 
      <div class="th"></div> 
     </div> 
     <div class="tr"> 
      <div class="td"></div> 
     </div> 
     <div class="tr"> 
      <div class="td"></div> 
     </div> 
    </div>

最好使用DIV而不是表格。你可以用小的改变做同样的事情。如果您使用PDF或通过模板等电子邮件发送，那么最好将CSS内联添加到HTML。

UPDATE：

你可以这样做：

<style> 
    table { 
    width: 100%; 
    border-collapse: collapse; 
} 

th { 
    height: 60px; 
} 
td{height: 100px;} 
td, th { 
    background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); 
    border: 1px solid Black; 
} 
</style> 


<table> 
    <tr> 
    <th></th> 
    </tr> 
    <tr> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    </tr> 
</table>

或jQuery来使用嵌套的div替换表：

<style> 
    .table { 
     width: 100%; 
     display:table; 
     border-collapse: collapse; 
    } 
    .table .tr{ 
     display:table-row; 
    } 

    .table .th{ 
     height: 60px; 
     font-weight:bold; 
    } 
    .table .td{height: 100px;} 
    .table .th, 
    .table .td { 
     border: 1px solid Black; 
     display:table-cell; 
     background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); 
    } 
</style> 


<table> 
    <tr> 
    <th>a</th> 
    </tr> 
    <tr> 
    <td>b</td> 
    </tr> 
    <tr> 
    <td>c</td> 
    </tr> 
</table> 

<script> 
    $(document).ready(function(){ 
     $("table").each(function(a,table){ 
      var i=a; 
      $(table).after('<div class="table" id="table-'+i+'"></div>'); 

      var currentTH = $(this).parent().find('th'); 
      $(currentTH).each(function(){ 
       var content=$(this).html(); 
       $('#table-'+i).append(' <div class="tr"><div class="th">'+content+'</div></div>'); 
      }); 

      var currentTD = $(this).parent().find('td'); 
      $(currentTD).each(function(){ 
       var content=$(this).html(); 
       $('#table-'+i).append(' <div class="tr"><div class="td">'+content+'</div></div>'); 
      }); 

      $(this).remove(); 
     }); 
    }); 
</script>

来源

2014-12-26 20:04:33

感谢您的建议，但将我的所有表格（它们实际上不是空的单列表格）转换为嵌套div并不是真正的解决方案。 – stovroz 2014-12-28 20:09:36

好吧我更新我的答案，看看这个解决方案。最后的jQuery解决方案用nasted div替换你的表。你可以更新这个解决方案为jquery保存一些属性并放入新的div元素。 – 2014-12-30 10:38:34

wkhtmltopdf仍然使用旧的（过时）WebKit的梯度句法。试试这个：

-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#888));

来源

2014-12-26 22:21:29 user1120808

这个语法的结果没有改变，我很害怕。 – stovroz 2014-12-28 20:10:15

我们不得不wkhtmltopdf升级，由于安全方面的原因，我们经历了同样的问题，与CSS挣扎之后，但是我设法找到为我们工作，例如，下面的CSS的解决方案：

.TableRecords_Header { 
 
     color:#EAEAEA; 
 
     font-weight: normal; 
 
    background: #0F5D85 url(/RichWidgets/img/bar_gradient.png); 
 
     white-space: nowrap; 
 
     line-height: 18px; 
 
     padding: 4px 6px 4px 6px; 
 
     border-right: 1px solid white; 
 
     font-size: 14px; 
 
}

适用于任何表<th>或<tr>细胞，使这样的事情： Gradient Bug

事实证明，这个版本的WebKit有处理 “重复-X” CSS属性的问题，所以，要解决这个问题，我已经使用这个CSS3等效：

.TableRecords_Header { 
 
    background-repeat: no-repeat !important; 
 
    background-size: 100% 23px !important; 
 
}

Where background-repeat：不重复！重要;告诉webkit不要使用背景重复消除问题。至于background-size，值100％与原始repeat-x相同，并且23px是产生您的渐变的图像的高度。在这种情况下是/RichWidgets/img/bar_gradient.png的高度。当我们加入这个CSS3风格下列图像将显示在正确渲染PDF为：

Gradient problem solved

最好的问候，努诺·古埃德斯

来源

2016-03-28 11:52:17

对我来说是那么简单添加

background-repeat: no-repeat !important;

来源

2016-06-16 19:32:32 neonbytes

如何获得wkhtmltopdf以显示th和td背景渐变？

编辑：

回答

相关问题