Come posso ottenere wkhtmltopdf per visualizzare i gradienti di sfondo th e td?

Question

Ho bisogno di aggiungere gradienti di sfondo ad alcuni elementi TD e TH in pagina che viene convertito in PDF, ma sto ottenendo alcuni molto strano comportamento da wkhtmltopdf, in modo da quando faccio questo:

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>

L'altezza del th sembra in qualche modo invadere ogni successivo td. Tutto va bene se rimuovo il th o imposta la sua altezza su un multiplo intero dell'altezza td.

Qualcuno ha qualche idea su cosa sta succedendo qui? Il mio HTML è difficile da modificare, quindi spero di riuscire a farlo funzionare usando solo il CSS o le impostazioni di wkhtmltopdf.

Edit:

Alcuni screenshots prima della bontà scadenza:

Ecco come appare in un browser webkit:

Ecco cosa wkhtmltopdf fa ad esso:

E un'ulteriore osservazione: non è necessario essere un th per causare il problema, in quanto la modifica di uno stesso target <td class='th'> causerà lo stesso effetto.

Answer 1

Utilizzare i CSS incorporati per questa pagina che convertono in pdf.

Answer 2

Cosa ne pensi?

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

È meglio utilizzare DIV al posto dei tavoli. Puoi fare la stessa cosa con piccole modifiche. Ed è meglio per voi aggiungere CSS in linea all'HTML se lavorate in PDF o inviate via email come modello.

UPDATE:

Si può fare questo:

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

o jQuery per sostituire le tabelle con div annidati:

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

Answer 3

wkhtmltopdf utilizza ancora il vecchio (deprecato) gradiente webkit sintassi.Prova questo:

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

Answer 4

Abbiamo dovuto aggiornare wkhtmltopdf per ragioni di sicurezza e abbiamo sperimentato lo stesso problema, ma dopo aver lottato con i CSS sono riuscito a trovare una soluzione che ha funzionato per noi, per esempio, il seguente 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; 
 
}

applicato a qualsiasi tavolo <th> o <tr> cellule, rende qualcosa di simile: Gradient Bug

Si scopre che questa versione di WebKit ha problemi di movimentazione proprietà CSS "repeat-x", quindi, per risolvere questo problema che ho usato questo CSS3 Equivalente:

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

Dove background-repeat: no-repeat! Important; dice al webkit di non usare la ripetizione dello sfondo eliminando il problema. Come per background-size, il valore 100% fa lo stesso come l'originale repeat-x, e la 23px è l'altezza dell'immagine che produce il gradiente. in questo caso è l'altezza di /RichWidgets/img/bar_gradient.png. Quando abbiamo aggiunto questo stile CSS3 PDF reso correttamente come mostrato nell'immagine seguente:

Gradient problem solved

migliori saluti, Nuno Guedes

Answer 5

Per me è stato semplice come l'aggiunta

background-repeat: no-repeat !important;