Ist es möglich, eine HTML-Seite so zu gestalten, dass sie sich z. B. wie eine A4-Seite in MS Word verhält?
Im Wesentlichen möchte ich die HTML-Seite im Browser anzeigen und den Inhalt in den Dimensionen einer A4-Seite umreißen können.
Der Einfachheit halber gehe ich davon aus, dass die HTML-Seite nur Text enthält (keine Bilder usw.) und es keine <br> Tags zum Beispiel.
Wenn die HTML-Seite ausgedruckt wird, hat sie die Größe einer A4-Seite.
Ich weiß, dass dieses Thema schon ziemlich alt ist, aber ich möchte meine Erfahrungen zu diesem Thema weitergeben. Eigentlich war ich auf der Suche nach einem Modul, das mir bei meinen täglichen Berichten helfen kann. Ich schreibe einige Dokumentationen und Berichte in HTML + CSS (anstelle von Word, Latex, OO, ...). Das Ziel wäre, sie auf A4-Papier zu drucken, um sie mit Freunden zu teilen, ... Anstatt zu suchen, entschied ich mich für eine kleine lustige Coding-Session, um eine einfache Lib zu implementieren, die "Seiten", Seitenzahl, Zusammenfassung, Kopfzeile, Fußzeile, .... behandeln kann. Letztendlich habe ich es in ~~2h geschafft und ich weiß, dass das nicht das beste Tool aller Zeiten ist, aber für meinen Zweck ist es fast ok. Sie können einen Blick auf dieses Projekt in meinem Repo werfen und zögern Sie nicht, Ihre Ideen zu teilen. Es ist vielleicht nicht das, was Sie zu 100% suchen, aber ich denke, dass dieses Modul Ihnen helfen kann.
Grundsätzlich erstelle ich eine Seite mit dem Textkörper "Breite: 200mm;" und dem Container mit der Höhe: 290mm (kleiner als A4). Dann habe ich page-break-after: always; verwendet, damit die "Druck"-Option des Browsers weiß, wann die Seiten zu teilen sind.
Ich habe verwendet 680px in Geschäftsberichten zum Druck auf A4-Seiten seit 1998. Die 700px konnten nicht richtig passen, abhängig von der Größe der Ränder. Moderne Browser können Seite schrumpfen, um Seite auf dem Drucker passen, aber wenn Sie 680 Pixel verwenden Sie richtig in fast allen Browsern zu drucken.
Das ist HTML für Sie Codeschnipsel ausführen und sehen Sie das Ergebnis:
window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>JSFiddle:
Es ist durchaus möglich, Ihr Layout so einzustellen, dass es die Proportionen einer A4-Seite annimmt. Sie müssten nur Breite und Höhe entsprechend einstellen (eventuell mit window.innerHeight y window.innerWidth obwohl ich mir nicht sicher bin, ob das zuverlässig ist).
Der schwierige Teil ist der Druck von A4. Javascript zum Beispiel unterstützt das Drucken von Seiten nur rudimentär mit dem window.print Methode. Wie @Prutswonder vorgeschlagen hat, erstellen Sie eine PDF von der Webseite aus ist wahrscheinlich die raffinierteste Art, dies zu tun (abgesehen von der Bereitstellung der PDF-Dokumentation). Allerdings ist dies nicht so trivial, wie man vielleicht denkt. Hier ist ein Link, der eine Beschreibung einer Open-Source-Java-Klasse zur Erstellung von PDFs aus HTML enthält: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .
Wenn Sie eine PDF-Datei mit A4-Proportionen erstellt haben, erhalten Sie natürlich einen sauberen A4-Ausdruck Ihrer Seite. Ob das den Zeitaufwand wert ist, ist eine andere Frage.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
<title>DIN A4 Page</title>
<style type="text/css">
@page { size: 21cm 29.7cm; margin: 2cm }
p { line-height: 120%; text-align: justify; background: transparent }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>
</html> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
