Wie bekomme ich wkhtmltopdf, um th und td Hintergrundgradienten anzuzeigen?

Question

Ich brauche Hintergrund Gradienten zu einigen td und th-Elemente in Seite hinzuzufügen, die in PDF konvertiert wird, aber ich einige sehr seltsame Verhalten von wkhtmltopdf bekommen, so, wenn ich dies tun:

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>

Die Höhe des th scheint in jedem folgenden td irgendwie zu übergreifen. Alles ist gut, wenn ich den th entferne oder seine Höhe auf ein ganzzahliges Vielfaches der td Höhe setze.

Wer hat irgendeinen Einblick in das, was hier vor sich geht? Mein HTML ist schwer zu ändern, also hoffe ich, dass es funktioniert, indem ich nur CSS oder wkhtmltopdf Einstellungen benutze.

Edit:

einige Screenshots, bevor die Prämie gültig bis:

Hier ist, wie es in einem Webkit-Browser aussieht:

Hier ist, was wkhtmltopdf es tut:

Und eine weitere Beobachtung: es muss kein Problem sein, um das Problem zu verursachen, da die Änderung zu einem ähnlich zielgerichteten <td class='th'> den gleichen Effekt verursachen wird.

Answer 1

Verwenden Sie Inline-CSS für diese Seite, die in PDF konvertieren.

Answer 2

Was denken Sie darüber?

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

Ist besser, DIV anstelle der Tabellen zu verwenden. Sie können dasselbe mit kleinen Änderungen tun. Und es ist besser für Sie, CSS inline zu HTML hinzuzufügen, wenn Sie PDF bearbeiten oder eine E-Mail wie eine Vorlage senden.

UPDATE:

Sie können dies tun:

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

oder jQuery Tabellen zu ersetzen, mit verschachtelten divs:

<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 verwendet immer noch den alten (veraltet) webkit Gradienten Syntax.Versuchen Sie folgendes:

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

Answer 4

Wir hatten wkhtmltopdf aus Sicherheitsgründen zu verbessern und wir das gleiche Problem erlebt, aber nachdem sie mit CSS kämpfen ich eine Lösung finden verwaltet, die für uns gearbeitet, zum Beispiel die folgende 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; 
 
}

auf jeden Tisch Angewandte <th> oder <tr> Zellen, macht so etwas wie dieses: Gradient Bug

Es stellt sich heraus, dass diese Version von WebKit Probleme Umgang mit "repeat-x" CSS-Eigenschaft hat, so, dieses Problem zu lösen, habe ich verwendet, um dieses CSS3-Äquivalent:

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

Wo Hintergrund-Wiederholung: keine Wiederholung! Wichtig; teilt Webkit mit, keine Hintergrundwiederholung zu verwenden, um das Problem zu beseitigen. Wie für Hintergrund-Größe, der Wert 100% macht das gleiche wie das Original repeat-x und die 23px ist die Höhe des Bildes, das den Farbverlauf erzeugt. in diesem Fall ist die Höhe /RichWidgets/img/bar_gradient.png. Wenn wir diese CSS3 Stil hinzugefügt die PDF korrekt wiedergegeben, wie in der folgenden Abbildung dargestellt:

Gradient problem solved

Mit besten Grüßen, Nuno Guedes

Answer 5

Für mich war es so einfach wie

background-repeat: no-repeat !important; 

Hinzufügen