我需要的背景漸變添加到網頁一些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背景漸變？

編輯：

回答

相關問題