Jak zrobić stronę HTML w formacie A4?

Question

Jak zrobić stronę HTML w formacie A4?

Czy jest możliwe, aby strona HTML zachowywała się, na przykład, jak strona formatu A4 w MS Word?

Zasadniczo chcę móc wyświetlać stronę HTML w przeglądarce i zarysować zawartość w wymiarach strony formatu A4.

Dla uproszczenia zakładam, że strona HTML będzie zawierać tylko tekst (bez obrazków itp.) i nie będzie znaczników <br> na przykład.

Również, gdy strona HTML jest drukowana, to wyjdzie jako stron formatu A4 papieru.

297

html css printing

Author: e-sushi, 2010-07-27

Source

14 answers

Dość łatwo byłoby zmusić przeglądarkę internetową do wyświetlania strony o takich samych wymiarach w pikselach jak A4. Jednak może być kilka dziwactw, gdy rzeczy są renderowane.

Zakładając, że Twoje monitory wyświetlają 72 dpi, możesz dodać coś takiego:

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

58

Author: Tim McNamara,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-17 10:47:05

Rozmiar A4 to 210x297mm

Więc możesz ustawić stronę HTML tak, aby pasowała do tych rozmiarów za pomocą CSS:

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

26

Author: zurfyx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-01 12:49:09

Utwórz sekcję z każdą stroną i użyj poniższego kodu, aby dostosować marginesy, wysokość i szerokość.

Jeśli drukujesz rozmiar A4.

Następnie użytkownik

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

Następnie utwórz div z całą zawartością w nim.

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

Lub

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    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;
}

20

Author: Pir Abdul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-06 11:41:45

Użyłem HTML do generowania raportów, które poprawnie drukują się w rzeczywistych rozmiarach na prawdziwym papierze.

Jeśli ostrożnie używasz mm jako jednostek w pliku CSS, powinno być OK, przynajmniej dla pojedynczych stron. Ludzie mogą Cię spieprzyć, zmieniając powiększenie drukowania w swojej przeglądarce.

Wydaje mi się, że wszystko, co robiłem, było pojedynczą stroną, więc nie musiałem się martwić o paginację - to może być znacznie trudniejsze.

16

Author: Will Dean,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-27 07:49:31

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

W Twoim normalnym style.css:

table.tableclassname {
  width: 400px;
}

W Twoim print.css:

table.tableclassname {
  width: 16 cm;
}

12

Author: Jacob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-17 07:37:29

PPI i DPI nie mają absolutnie żadnej różnicy w sposobie drukowania dokumentu w przeglądarce. drukarka nie pobiera żadnych informacji o skoku kropki ekranu lub DPI obrazów itp. jeśli drukujesz obrazy, będą one drukowane w rozmiarze podobnym do tego, jak są wyświetlane na ekranie. procesor drukowania przeglądarki zwiększyłby DPI obrazów z czegoś dość niskiego, takiego jak 72dpi, do dowolnego DPI reszty dokumentu. powiedzmy, że obrazek wyświetla się jako pół strony szerokości, a następnie jego około 4 " szerokości fizycznej. szerokość w pikselach obrazu wynosiłaby około 300px, aby wyświetlać się poprawnie w przeglądarce. do czasu drukowania w nominalnej rozdzielczości 300dpi procesor dodał piksele, a obraz wzrośnie do około 1200px, co przy 300 DPI wynosi 4".

Jeśli chodzi o elementy wektorowe lub niepikselowe, takie jak tekst, drukarka wybiera własne DPI ze sterownika, które nie odnoszą się do skoku kropki ekranu lub szerokości przeglądarki itp. jeśli przeglądarka ma szerokość 3000px, procesor druku zawija tekst odpowiednio.

Oto co utrudnia tworzenie wyświetlaczy wydruku: każda przeglądarka i drukarka zinterpretuje rozmiary tekstu (pt, em, px) i odstępy na swój sposób. w zależności od używanej drukarki, przeglądarki, a może nawet systemu operacyjnego, otrzymasz różną ilość linii i znaków na stronę. więc nawet jeśli testujesz na komputerze za pomocą przeglądarki i drukarki i stwierdzisz, że możesz wyświetlać tekst w polu w rozdzielczości 640x900px i jest idealny do drukowania, następny facet, który próby drukowania będą prawdopodobnie drukować inaczej. naprawdę nie ma sposobu, aby zmusić każdą drukarkę i przeglądarkę, aby za każdym razem była identyczna.

Zapomnij o pikselach i moreso zapomnij o DPI, jedyną rzeczą, do której możesz użyć pikseli, jest ustawienie szerokości tabeli, która symuluje szerokość obszaru wydruku na drukarce. w takim przypadku odkryłem, że 640px wide jest blisko.

11

Author: Quintin Humphreys,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-03 23:03:18

Szukając podobnego problemu znalazłem to - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 to format dokumentu, jako obraz ekranowy, który będzie zależał od rozdzielczości obrazu, na przykład dokument A4 o rozmiarze:

72 dpi (web) = 595 x 842 pikseli
300 dpi (Wydruk) = 2480 x 3508 pikseli (To jest " A4 "jak ja to znam, tj. " 210mm X 297mm @ 300 dpi")
600 dpi (print) = 4960 x 7016 pikseli

10

Author: Wojciech Bednarski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-03 22:36:41

Wiem, że ten temat jest dość stary, ale chcę podzielić się moimi doświadczeniami na ten temat. Właściwie, Szukałem modułu, który może mi pomóc w codziennych raportach. Piszę trochę dokumentacji i raportów w HTML + CSS (zamiast Word, Latex, OO, ...). Celem byłoby wydrukowanie ich na papierze A4, aby podzielić się nimi z przyjaciółmi, ... Zamiast szukać, zdecydowałem się na małą zabawną sesję kodowania, aby zaimplementować prosty lib, który może obsługiwać "strony", Numer strony, Podsumowanie, nagłówek, stopka,... W końcu zrobiłem to w ~ ~ 2h i Wiem, że nie jest to najlepsze narzędzie, ale jest prawie ok dla mojego celu. Możesz spojrzeć na ten projekt na moim repo i nie wahaj się podzielić swoimi pomysłami. Może nie jest to to, czego szukasz w 100% , ale myślę, że ten moduł może Ci pomóc.

Zasadniczo tworzę stronę O treści "Szerokość: 200mm;" i pojemnik o wysokości: 290mm (mniejszy niż A4). Następnie użyłem page-break-after: always; więc opcja "Drukuj" przeglądarki wie kiedy podziel strony.

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

8

Author: Kursion,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-11 22:58:12

Widziałem takie rozwiązanie po przeszukaniu w google, poszukaj "A4 CSS page template "(codepen.io). pokazuje obszar o rozmiarze A4 (A3, A5, również portret) w przeglądarce, używając tagu . Wewnątrz tego tagu wyświetlana jest zawartość, ale pozycja bezwzględna jest nadal w odniesieniu do obszaru przeglądarki.

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>

To działa dla mnie bez żadnej innej biblioteki css / js. Działa dla obecnych przeglądarek (IE, FF, Chrome).

7

Author: Cas Knook,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-26 09:12:14

Technicznie można, ale potrzeba dużo pracy, aby wszystkie przeglądarki wydrukowały stronę dokładnie tak, jak jest wyświetlana na ekranie. Ponadto większość przeglądarek wymusza adres URL, datę wydruku i numerację stron na wydruku, co nie zawsze jest pożądane. Nie można tego zmienić ani wyłączyć.

Zamiast tego radzę utworzyć plik PDF na podstawie treści na ekranie i podać plik PDF do pobrania i / lub drukowania. Chociaż większość dostępnych bibliotek PDF jest płatna, istnieje kilka darmowe alternatywy dostępne do tworzenia podstawowych plików PDF.

6

Author: Prutswonder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-27 07:40:45

Jest całkowicie możliwe ustawienie układu tak, aby przyjmował proporcje strony a4. Musisz tylko odpowiednio ustawić szerokość i wysokość(ewentualnie sprawdzić za pomocą window.innerHeight i window.innerWidth, chociaż nie jestem pewien, czy to jest wiarygodne).

[[3]}najtrudniejsze jest drukowanie A4. Na przykład Javascript obsługuje tylko drukowanie stron rudimentalnie metodą window.print. Jak zasugerował @Prutswonder tworzenie PDF ze strony internetowej jest prawdopodobnie najbardziej wyrafinowanym sposobem na to (innym niż dostarczanie dokumentacji PDF w pierwszej kolejności). Nie jest to jednak tak trywialne, jak mogłoby się wydawać. Oto link, który zawiera opis klasy Java open source do tworzenia plików PDF z HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Oczywiście po utworzeniu pliku PDF z nadrukiem w proporcjach A4 spowoduje to czysty Wydruk strony w formacie A4. Czy warto zainwestować czas to kolejne pytanie.

3

Author: FK82,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-27 08:21:50

Używam 680px w raportach handlowych do drukowania na stronach A4 od 1998 roku. 700px nie może pasować poprawnie w zależności od wielkości marginesów. Nowoczesne przeglądarki mogą zmniejszyć stronę, aby zmieścić stronę na drukarce, ale jeśli używasz 680 pikseli, wydrukujesz poprawnie w prawie każdej przeglądarce.

To jest HTML dla ciebie Uruchom fragment kodu i zobacz wynik de:

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/

3

Author: lynx_74,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-01 13:25:56

Wiele sposobów:

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


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

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

2

Author: Nalan Madheswaran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-20 03:04:19

score 224 · Accepted Answer

Wieki temu, w listopadzie 2005 roku, AlistApart.com opublikował artykuł o tym, jak opublikowali książkę używając tylko HTML i CSS. Zobacz: http://alistapart.com/article/boom

Oto fragment tego artykułu:

CSS2 ma pojęcie paged media (myśl arkusze papieru), w przeciwieństwie do mediów ciągłych (myśl paski przewijania). Arkusze stylów mogą ustawiać Rozmiar stron i ich marginesy. Szablony stron mogą mieć nazwy, a elementy mogą określać, która strona ma być nazwana do wydrukowania. Ponadto elementy w dokumencie źródłowym mogą wymusić podziały stron. Oto fragment arkusza stylów, którego użyliśmy:
@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}
Mając amerykańskiego wydawcę, podano nam rozmiar strony w calach. My, Europejczycy, kontynuowaliśmy pomiary metryczne. CSS akceptuje oba.

Po ustawieniu rozmiaru strony i marginesu, musieliśmy się upewnić, że są podziały stron we właściwych miejscach. Poniższy fragment pokazuje jak generowane są podziały stron po rozdziałach i dodatki:
div.chapter, div.appendix {
    page-break-after: always;
}
Również, użyliśmy CSS2 do zadeklarowania nazwanych stron:
div.titlepage {
  page: blank;
}
Oznacza to, że strona tytułowa ma być wydrukowana na stronach o nazwie " blank."CSS2 opisał pojęcie nazwanych stron, ale ich wartość staje się widoczna tylko wtedy, gdy dostępne są nagłówki i stopki.

W każdym razie...]}

Ponieważ chcesz drukować A4, potrzebujesz oczywiście różnych wymiarów:

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

Artykuł zajmuje się takimi sprawami jak ustawianie podziałów stron itp. więc możesz chcę to przeczytać całkowicie.

W Twoim przypadku, sztuką jest najpierw utworzyć print CSS. Większość nowoczesnych przeglądarek (>2005) obsługuje powiększanie i będzie już w stanie wyświetlić stronę internetową opartą na print CSS.

Teraz będziesz chciał, aby wyświetlacz internetowy wyglądał nieco inaczej i dostosować cały projekt do większości przeglądarek (w tym starych, sprzed 2005 roku). W tym celu musisz utworzyć plik CSS WWW lub nadpisać niektóre części print CSS. Podczas tworzenia CSS dla WWW wyświetlacz, pamiętaj, że przeglądarka może mieć dowolny rozmiar(pomyśl: "mobilny" do "telewizorów wielkoekranowych"). Znaczenie: dla web CSS szerokość strony i szerokość obrazu najlepiej ustawić za pomocą zmiennej szerokość ( % ), aby obsługiwać jak najwięcej urządzeń wyświetlających i klientów przeglądania stron internetowych, jak to możliwe.

Edytuj (26-02-2015)

Dzisiaj przypadkiem natknąłem się na kolejny, nowszy artykuł w SmashingMagazine , który również nurkuje w projektowaniu do druku za pomocą HTML i CSS... yet-another-tutorial.