So erhalten Sie beim Drucken von HTML-Elementen die richtige Rendering-Größe
Ich habe Probleme zu verstehen, wie HTML-Elemente mit der richtigen Größe wiedergegeben werden, wenn sie auf A4-Papier gedruckt werden.
Um meinen Zweck zu verdeutlichen, habe ich meinen Code auf eine HTML-Seite mit einer einzigen rot umrandeten Tabelle vereinfacht, die 210 mm x 297 mm (A4-Papierformat) betragen sollte:
- Wenn ich versuche, dies mit Firefox (49.0.2), und sorgfältig alle Ränder auf 0 und Rendering-Größe auf 100% zu drucken, bekomme ich eine Tabelle, die offensichtlich überdimensioniert ist:
- Wenn ich für die Rendergröße 'Adapt to page' auswähle, bekomme ich eine Tabelle, die offensichtlich verkleinert ist:
- Ich bin nicht viel glücklicher, wenn ich es mit Chrome (54.0.2840.87 m) versuche
Ich habe versucht, die Größe auf 210mmx297mm den ganzen Weg in der CSS zu zwingen, aber es ist immer noch etwas falsch. Ich kann nicht herausfinden, was es ist ... entweder ein Fehler in der Rendering-Engine oder Einstellung fehlt in meinem Code.
Hinweis
Kontextuell versuche ich automatische Berichte alle in html + css + javascript zu erstellen, so dass sie leicht angesehen und schließlich von einem Web-Browser auf PDF oder Papier gedruckt werden können. Das Deckblatt sollte bis zum Rand des A4-Papiers mit einem Bild gefüllt werden.
Hier ist ein vollständigeres Beispiel:
Ich bin fast da, alles wird schön auf dem Bildschirm angezeigt (Firefox + Chrome), aber es gibt immer noch diese Ränder beim Drucken ( Drucken funktioniert mit Firefox + nomargin + nur anpassen ... Chrome ist für Bugs wiederhole Tabellenkopf / Fußzeile beim Drucken).
3 Antworten
Sie lösen ein schwieriges Problem, das für viele Programmierer ein Fluch ist. Das Drucken aus HTML und die Kompatibilität mit verschiedenen Browsern ist grundsätzlich ein Einhorn. Sie sollten diese Sorge nicht selbst bewältigen. Die Eigenarten des CSS-Stylings und die Fragmentierung des Browser-Ökosystems werden dafür sorgen, dass Sie keinen Erfolg haben.
Mein Tipp ist, dass Sie sich eine PDF-Generator-API wie PDF-Kit oder iText .
Nach meinen Recherchen ist das Drucken von Seiten und Formularen in Firefox besonders problematisch. Wie Sie aus erster Hand erfahren haben, können Sie Margen nicht vernünftig verwalten. Ich habe es auch mit Firefox 49.0.2 ohne Erfolg versucht.
Ich dachte daran, @media print{} zu verwenden, aber Firefox wollte das nicht zusammenarbeiten.
Nachdem Sie gesagt haben, dass Ihr Code Chrome für die von Ihnen erwähnte Version verwendet hat, funktionierte Ihr Code einwandfrei. Beachten Sie, dass ich die Ränder auf 'none' gesetzt habe.
Die Titelseite sollte bis zum Rand des A4-Papiers mit einem Bild gefüllt sein.
Sie werden diese Anforderung niemals erfüllen. Vertrauen Sie mir, ich habe lange Zeit Dashboards und Berichte im Web erstellt und Sie erhalten einfach keine feinkörnige Kontrolle über das Rendering. Das Internet ist nicht dafür ausgelegt.
Sie können immer noch großartige Berichte erstellen, wenn Sie innerhalb einer Marge arbeiten und nicht nach pixelgenauen Layouts suchen. Webberichte können sehr scharf aussehen und Sie können mehrere Medien mit einer Codebasis abdecken.
Aber für Situationen, in denen pixelgenaues Rendering wichtig ist, reicht neben der Kontrolle über Seitenumbrüche und dergleichen auch nur eine PDF-Bibliothek aus. Es gibt einige gute da draußen - ich hatte Erfolg mit PDFSharp .
Warum zeigen Sie kein Titelbild an, das nicht die gesamte Seite umfasst?
Sie könnten phantomjs verwenden, um Ihre PDF-Datei zu rendern (Sie fragen nach einer PDF-Datei). In PHP habe ich erfolgreich Ссылка verwendet, um PDFs zu generieren. (auch beim Rendern von JavaScript-basierten Diagrammen mit d3.js). Es ist nicht einfach, aber mit Headless Browsing können Sie es zum Laufen bringen.