Wie erstellt man eine HTML-Seite in A4-Papierformatseiten?

Question

Ist es möglich, eine HTML-Seite wie eine A4-Seite in MS Word zu verhalten?

Im Wesentlichen möchte ich in der Lage sein, die HTML-Seite im Browser anzuzeigen, und den Inhalt in den Abmessungen einer A4-Seite umreißen.

Der Einfachheit halber gehe ich davon aus, dass die HTML-Seite nur Text (keine Bilder etc.) enthalten wird und es keine <br> Tags geben wird.

Auch wenn die HTML-Seite gedruckt wird, würde es als A4-Papierseiten herauskommen.

Answer 1

Alter vor, im November 2005 veröffentlicht AlistApart.com einen Artikel darüber, wie sie ein Buch mit nichts als HTML und CSS veröffentlicht. Siehe: http://alistapart.com/article/boom

Hier ist ein Auszug aus dem Artikel:

CSS2 hat eine Vorstellung von ausgelagerten Medien (Think Blatt Papier), als kontinuierliche Medien gegen (man denke Scrollbalken). Style-Sheets können die Größe von Seiten und deren Ränder festlegen. Seitenvorlagen können Namen erhalten und Elemente können angeben, auf welcher benannten Seite sie gedruckt werden sollen. Außerdem können Elemente im Quelldokument Seitenumbrüche erzwingen. Hier ist ein Ausschnitt aus dem Stylesheet wir verwendet:

@page { 
    size: 7in 9.25in; 
    margin: 27mm 16mm 27mm 16mm; 
} 

einen US-Verlag zu haben, waren wir die Seitengröße in Zoll angegeben. Wir, Europäer, fuhren mit metrischen Messungen fort. CSS akzeptiert beides.

Nachdem wir die Seitengröße und den Seitenrand eingestellt hatten, mussten wir sicherstellen, dass an den richtigen Stellen Seitenumbrüche vorhanden waren. Der folgende Auszug zeigt, wie Seitenumbrüche werden nach Kapiteln und Anhängen erstellt:

div.chapter, div.appendix { 
    page-break-after: always; 
} 

Auch wir verwenden CSS2 namens Seiten zu erklären:

div.titlepage { 
    page: blank; 
} 

Das heißt, ist die Titelseite auf den Seiten gedruckt wird mit dem Namen "leer". CSS2 beschrieb das Konzept der benannten Seiten, aber ihr Wert wird nur sichtbar, wenn Kopf- und Fußzeilen verfügbar sind.

Wie dem auch sei ...

Da Sie A4 ausdrucken möchten, Sie werden verschiedene Dimensionen natürlich brauchen:

@page { 
    size: 21cm 29.7cm; 
    margin: 30mm 45mm 30mm 45mm; /* change the margins as you want them to be. */ 
} 

Der Artikel in Sachen taucht wie Seitenumbrüche einstellen etc., so dass Sie Vielleicht möchte ich das komplett lesen.

In Ihrem Fall ist der Trick, zuerst die Druck-CSS zu erstellen. Die meisten modernen Browser (> 2005) unterstützen das Zoomen und können bereits eine Website basierend auf dem Print-CSS anzeigen.

Jetzt wollen Sie das Web-Display etwas anders aussehen lassen und das gesamte Design an die meisten Browser anpassen (einschließlich der alten, vor 2005). Dazu müssen Sie eine Web-CSS-Datei erstellen oder einige Teile Ihres Druck-CSS überschreiben. Bedenken Sie beim Erstellen von CSS für die Webanzeige, dass ein Browser ALLE Größen haben kann (denken Sie: "Mobil" bis "Großbildfernseher").Bedeutung: Für das Web-CSS wird Ihre Seitenbreite und Bildbreite am besten mit einer variablen Breite (%) festgelegt, um so viele Anzeigegeräte und Web-Browsing-Clients wie möglich zu unterstützen.

EDIT (26-02-2015)

Heute habe ich zufällig auf einen anderen stolpern, neuere article at SmashingMagazine, die auch für den Druck in der Gestaltung mit HTML und CSS taucht ... nur für den Fall, dass Sie yet- verwenden könnte ein anderes-Tutorial.

Answer 2

Technisch könnten Sie, aber es würde viel Arbeit erfordern, alle Browser zu bekommen, um die Seite genau so zu drucken, wie es auf dem Bildschirm angezeigt wird. Außerdem erzwingen die meisten Browser die URL, das Druckdatum und die Seitennummerierung auf dem Ausdruck, was nicht immer gewünscht ist. Dies kann nicht geändert oder deaktiviert werden.

Stattdessen würde ich empfehlen, ein PDF basierend auf den Inhalten auf dem Bildschirm zu erstellen und das PDF zum Herunterladen und/oder Drucken zu dienen. Obwohl most available PDF libraries bezahlt werden, gibt es ein paar free alternatives zum Erstellen von grundlegenden PDFs.

Answer 3

Es wäre ziemlich einfach, den Webbrowser zu zwingen, die Seite mit den gleichen Pixeldimensionen wie A4 anzuzeigen. Es kann jedoch ein paar Macken geben, wenn Dinge gerendert werden.

Angenommen, Ihre Monitore zeigen 72 dpi, Sie so etwas wie dieses könnte hinzufügen:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body { 
     height: 842px; 
     width: 595px; 
     /* to centre page on screen*/ 
     margin-left: auto; 
     margin-right: auto; 
    } 
    </style> 
    </head> 
    <body> 
    </body> 
</html> 

Answer 4

ich HTML verwendet habe Berichte zu erzeugen, die Druck-out korrekt an realen Größen auf echtem Papier.

Wenn Sie mm vorsichtig als Einheiten in der CSS-Datei verwenden, sollten Sie zumindest für einzelne Seiten OK sein. Die Leute können Sie aber vermasseln, indem Sie den Druckzoom in ihrem Browser ändern.

Ich erinnere mich, dass alles, was ich tat, eine einzelne Seite war, also musste ich mir keine Sorgen um die Seitenumbruch machen - das könnte viel schwieriger sein.

Answer 5

Es ist durchaus möglich, dass Ihr Layout die Proportionen einer a4-Seite annimmt. Sie müssten nur Breite und Höhe entsprechend einstellen (möglicherweise mit window.innerHeight und window.innerWidth überprüfen, obwohl ich nicht sicher bin, ob das zuverlässig ist).

Der schwierige Teil ist mit dem Drucken von A4. JavaScript unterstützt zum Beispiel nur das rudimentäre Drucken von Seiten mit der Methode window.print. Als @ Prutswonder schlug vor, eine PDF von der Webseite zu erstellen, ist wahrscheinlich die ausgeklügeltste Art, dies zu tun (abgesehen von PDF-Dokumentation an erster Stelle). Dies ist jedoch nicht so trivial, wie man meinen könnte. Hier ist ein Link, der eine Beschreibung aller Open-Source-Java-Klassen enthält, um PDFs aus HTML zu erstellen: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html.

Offensichtlich, sobald Sie ein PDF mit A4 Proportionen Drucken erstellt haben, wird es zu einem sauberen A4-Druck Ihrer Seite führen. Ob sich die Investition lohnt, ist eine andere Frage.

Answer 6

PPI und DPI machen absolut keinen Unterschied wie ein Dokument von einem Browser gedruckt wird. Der Drucker nimmt keine Informationen über den Bildschirmpunktabstand oder die DPI der Bilder usw., wenn Sie Bilder drucken, die in einer ähnlichen Größe gedruckt werden, wie sie auf dem Bildschirm angezeigt werden.der Druckprozessor des Browsers würde die DPI der Bilder von etwas Niedrigem wie 72 dpi zu irgendeiner DPI des Rests des Dokuments erhöhen. sagen wir, das bild wird als eine halbe seite breit, dann ist es etwa 4 "breit physisch. die pixelbreite des bildes wäre ca. 300px korrekt im browser anzuzeigen. bis zum druck bei einem nominal 300 dpi hat der prozessor pixel hinzugefügt und das Bild wird zu ungefähr 1200px wachsen, das bei 300 DPI 4 "ist.

Wenn es sich um Vektor oder nicht pixelbasierte Elemente wie Text handelt, wählt der Drucker seine eigene DPI aus dem Treiber, die sich nicht auf Bildschirmpunktabstand oder Browserbreite usw. bezieht, wenn der Browser 3000px breit ist, wickelt der Druckprozessor Text als geeignet.

was es schwierig macht, Druckdisplays zu erstellen: Jeder Browser und Drucker interpretiert Textgrößen (pt, em, px) und Abstände auf seine eigene Art und Weise. Je nachdem, welchen Drucker, Browser und vielleicht sogar Betriebssystem Sie verwenden, erhalten Sie eine unterschiedliche Anzahl von Zeilen und Zeichen pro Seite. Also selbst wenn Sie auf Ihrem Computer mit Ihrem Browser und Drucker testen und herausfinden, dass Sie den Text in einer Box bei 640x900px und seine perfekte auf dem Drucker anzeigen können, wird der nächste Typ, der versucht zu drucken wird möglicherweise es anders drucken. es gibt wirklich keine Möglichkeit, jeden Drucker und Browser zu zwingen, es jedes Mal identisch zu bekommen.

Vergessen Sie Pixel und vergessen Sie auch DPI, das einzige, was Sie Pixel verwenden können, ist eine Tabellenbreite, die die Breite eines bedruckbaren Bereichs auf Ihrem Drucker simuliert. In diesem Fall habe ich festgestellt, dass 640 px breit ist.

Answer 7

<link rel="stylesheet" href="/css/style.css" type="text/css"> 
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print"> 

In Ihrem normalen style.css:

table.tableclassname { 
    width: 400px; 
} 

In Ihrem print.css:

table.tableclassname { 
    width: 16 cm; 
} 

Answer 8

Suche nach ähnlichen Problem, das ich diese gefunden - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 ist ein Dokumentenformat, wie ein Bildschirmbild, das von der Bildauflösung abhängt, f oder Beispiel Dokument eines A4 Größe verändert zu:

• 72 dpi (web) = 595 x 842 Pixel
• 300 dpi (Druck) = 2480 x 3508 Pixel (Dies ist "A4", wie ich sie kenne, dh "X 210mm 297mm @ 300 dpi")
• 600 dpi (Druck) = 4960 X 7016 Pixel

Answer 9

Abschnitt mit jeder Seite anlegen, und den folgenden Code verwenden, um Ränder, Höhe und Breite einzustellen.

Wenn Sie A4 drucken.

Dann Benutzer

Size : 8.27in and 11.69 inches 

@page Section1 { 
size:8.27in 11.69in; 
margin:.5in .5in .5in .5in; 
mso-header-margin:.5in; 
mso-footer-margin:.5in; 
mso-paper-source:0; 
} 



div.Section1 { 
page:Section1; 
} 

dann ein div mit all Ihre Inhalte darin erstellen.

<div class=Section1> 
type your content here... 
</div> 

oder

@media print { 
      .page-break { height:0; page-break-before:always; margin:0; border-top:none; } 
     } 
    body, p, span, td, a {font-size:9pt;font-family: Arial, Helvetica, sans-serif;} 
    body{margin-left:2em; margin-right:2em;} 
    .page{ 
    height:947px; 
    padding-top:5px; 
    page-break-after : always; 
    font-family: Arial, Helvetica, sans-serif; 
    position:relative; 
    border-bottom:1px solid #000; 

    } 

Answer 10

Ich weiß, dass dieses Thema ist ziemlich alt, aber ich möchte meine Erfahrungen zu diesem Thema teilen. Eigentlich habe ich ein Modul gesucht, das mir bei meinen täglichen Berichten helfen kann.Ich schreibe einige Dokumentationen und einige Berichte in HTML + CSS (anstelle von Word, Latex, OO, ...). Das Ziel wäre, sie auf A4-Papier zu drucken, um es mit Freunden zu teilen, ... Anstatt zu suchen, entschied ich mich für eine kleine lustige Codierungssitzung, um eine einfache Lib zu implementieren, die "Seiten", Seitenzahl, Zusammenfassung, Header behandeln kann , Fußzeile, .... Schließlich habe ich es in ~ 2 Stunden getan und ich weiß, dass das nicht das beste Werkzeug ist, aber es ist fast ok für meinen Zweck. Sie können sich dieses Projekt auf meinem Repo ansehen und zögern Sie nicht, Ihre Ideen zu teilen. Es ist vielleicht nicht das, wonach Sie suchen, aber ich denke, dass dieses Modul Ihnen helfen kann.

Grundsätzlich erstelle ich eine Seite des Körpers "Breite: 200mm;" und Behälter der Höhe: 290mm (kleiner als A4). Dann habe ich Seitenumbrüche benutzt: immer; Daher weiß die Option "Drucken" des Browsers, wann Seiten aufgeteilt werden sollen.

Repo: https://github.com/kursion/jsprint

Answer 11

A4-Format ist 210x297mm

So können Sie die HTML-Seite gesetzt, diese Größen mit CSS zu passen:

html,body{ 
    height:297mm; 
    width:210mm; 
} 

Answer 12

ich diese Lösung sah nach bei Google-Suche für „A4 CSS page Vorlage "(codepen.io). Es zeigt einen A4 (A3, A5, auch Hochformat) großen Bereich im Browser unter Verwendung der <Seite> Tag. Innerhalb dieses Tags wird der Inhalt angezeigt, aber die absolute Position ist immer noch in Bezug auf den Browserbereich.

body { 
 
    background: rgb(204,204,204); 
 
} 
 
page { 
 
    background: white; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 0.5cm; 
 
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); 
 
} 
 
page[size="A4"] { 
 
    width: 21cm; 
 
    height: 29.7cm; 
 
} 
 
page[size="A4"][layout="portrait"] { 
 
    width: 29.7cm; 
 
    height: 21cm; 
 
} 
 
@media print { 
 
    body, page { 
 
    margin: 0; 
 
    box-shadow: 0; 
 
    } 
 
}

<page size="A4">A4</page> 
 
<page size="A4" layout="portrait">A4 portrait</page>

Dies funktioniert für mich, ohne dass andere css/js-Bibliothek aufgenommen werden. Funktioniert für aktuelle Browser (IE, FF, Chrome).

Answer 13

Ich habe 680px in kommerziellen Berichten verwendet, um auf A4-Seiten seit 1998 zu drucken. Die 700px konnte nicht richtig abhängig von der Größe der Ränder passen. Moderne Browser können die Seite verkleinern, um auf die Seite des Druckers zu passen, aber wenn Sie 680 Pixel verwenden, werden Sie in fast allen Browsern korrekt drucken.

Das heißt HTML Sie Run Code-Schnipsel und de Ergebnis sehen:

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:

https://jsfiddle.net/ajofmm7r/

Answer 14

viele Möglichkeiten zu tun:

html,body{ 
    height:297mm; 
    width:210mm; 
} 


html,body{ 
    height:29.7cm; 
    width:21cm; 
} 

html,body{ 
    height: 842px; 
    width: 595px; 
}