Ich führe eine Webanwendung, die mit GWT erstellt wurde und die ursprünglich nur für Google Chrome entwickelt wurde.Warum druckt Google Chrome keine Tabellen- und Zellenrahmen und Zellenhintergrundfarben?
Es gibt mehrere "Berichte", die aus dem System extrahiert werden können. Die Art und Weise, wie dies implementiert wird, ist wie folgt: Zuerst wird das HTML für den Bericht erstellt und in einem Abschnitt des Bildschirms angezeigt (dies funktioniert korrekt). Danach gibt es eine Schaltfläche, mit der der Bericht gedruckt werden kann. Diese Aktion generiert den HTML-Code mit den Informationen (in einer HTML-Tabelle) auf die gleiche Weise wie den Bildschirmbericht und erstellt daraus eine HTML-Datei, die dann zum Drucken gesendet wird.
Hier zeigt das Monster sein Gesicht! (Tum-Dum-Dummmm - dramatische Musik).
Da Google Chrome auf die Version 59.0.3071.86 aktualisiert wurde, verlieren die Tabellen/Zellen beim Drucken ihre Ränder und Hintergrundfarben.
Ich dachte, vielleicht mit dem generierten HTML zu tun, es war comething, aber in der Tat, wenn ich zwingen, die html beim Drucken
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
die Tabelle noch nicht richtig gedruckt wird zu sein bekommen (und dies ist auch zu sehen in der Druckvorschau von Chrome (ja, sogar mit der Option zum Drucken von Hintergrundbildern ausgewählt)). Das Gleiche passiert, wenn ich die Tabelle auf dem Tag des Tisches selbst style. Etwas wie:
<table style="border: 1px solid black !important;">
Ich bin aus Ideen, so dass ich mich gefragt, ob jemand in ein ähnliches Problem bekam, oder hat eine Ahnung, was ich versuchen kann.
Vielen Dank im Voraus.
Und bearbeiten, um zu sagen, dass dies nicht das gleiche Problem wie das in den "mögliche Duplikate" ist. Ich hatte das "Hintergrundfarben" Problem in der Vergangenheit, und ich habe es behoben. In diesem Fall (und wie das Code-Snippet zeigt) scheint es, dass einige Stile nicht interpretiert werden, wie zum Beispiel der Tabellenrahmen. Und alles funktionierte vor chrome 59.0.3071.86, also scheint es ein neues Problem zu sein, kein "irgendwo innerhalb von 5 Jahren gelöst".
Und noch eine weitere Bearbeitung ein wenig weiter zu erklären:
irgendwo in meinem Webapp, gibt es einen kleinen Knopf, der „Bericht drucken“ liest. Dies erzeugt eine HTML-Datei, die dann zum Drucken gesendet wird. Ich ersetzte die generierte HTML mit einer ziemlich vereinfachten, die mein Problem darstellt.So , jedes Mal wenn ich drücke "Bericht drucken", I "Kraft" dies der generierten HTML zu sein:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Beachten Sie, wie ich die
body { -webkit-print-color-adjust: exact; }
Auch habe ich versucht, einige Variationen wie das Styling Tabelle als:
<table style="border: 1px solid black !important;">
Oder der Körper als
<body style="-webkit-print-color-adjust: exact;">
Ich werde nur ein Bild von einem „html Testbed“ hinzufügen sollte zeigen, wie meine allgegenwärtigen HTML-Anzeige:
Wenn jedoch die Druckvorschau „Pop“, das ist, was ich bekomme:
also auch nicht die backgoundfarbe Displays (wie ich passiere mit anderen sO-Nutzer glaube, aber mit ihrer Lösung nicht, hier zu arbeiten) noch der Tabellenrahmen.
Andere edit: Ich habe versucht, "print-spezifische CSS-Regeln" zu definieren, wie folgt:
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
body { -webkit-print-color-adjust: exact; }
table, th, td {border: 1px solid black !important;}
}
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
aber ich bekomme die gleichen Ergebnisse wie zuvor. Auch (und vielleicht ist das relevant ... und vielleicht ist es das nicht) wenn ich zum Beispiel eine Tischbreite definiere, wird das Styling beim Drucken korrekt angezeigt, während die Tabellenränder immer noch verborgen/nicht vorhanden/magisch entfernt sind (wähle eins).
FINAL EDIT - Abhilfe: war ich nicht in der Lage, das Problem per se, zu lösen und ich wirklich, wirklich nicht verstehen, warum es passiert. Was ich in der Lage war zu tun war eine Workaround arbeiten, und ich posten es hier nicht als Antwort, aber immer noch hopping es könnte jemand helfen:
Die Art, wie ich es tat war: als ich die Drucktaste drückte Ich öffne ein neues Fenster, das nur den HTML-Code enthält, den ich drucken möchte (genau so, wie ich es drucken möchte), und benutze Javascript, um es zu drucken, nachdem die Seite geladen wurde. So funktioniert es, und es druckt mit der richtigen Formatierung.
Manche mögen sagen, es ist Glück, andere "schwarze Magie". Ich sage "Fertig! Weiter!" (obwohl ich nicht glücklich bin mit der Tatsache, dass ich das Problem überhaupt nicht verstehe).
Mögliche Duplikat [Drucken Hintergrundfarben in Chrome] (https://stackoverflow.com/questions/2392366/print-background-colours-in-chrome) –
Erst gestern sah die gleiche [Frage auch] (https://stackoverflow.com/questions/44571567/print-angular-webpage-with-css-styling-applied-to-it) –
Es ist nicht. Danke trotzdem. – camilo