Comment faire une page HTML en format A4 page(s)?
Est-il possible de faire en sorte qu'une page HTML se comporte, par exemple, comme une page de taille A4 dans MS Word?
Essentiellement, je veux être en mesure d'afficher la page HTML dans le navigateur, et décrire le contenu dans les dimensions d'une page de taille A4.
Par souci de simplicité, je suppose que la page HTML ne contiendra que du texte (pas d'images, etc.) et il n'y aura pas de balises <br> par exemple.
De plus, lorsque la page HTML est imprimée, elle sort sous forme de pages Papier de format A4.
14 réponses
Ages ago, en novembre 2005, AlistApart.com publié un article sur la façon dont ils ont publié un livre en utilisant rien D'autre que HTML et CSS. Voir: http://alistapart.com/article/boom
Voici un extrait de cet article:
CSS2 a une notion de média paginé (pensez feuilles de papier), par opposition aux médias continus (pensez barres de défilement). Les feuilles de Style peuvent définir la taille des pages et leurs marges. Les modèles de Page peuvent recevoir des noms et les éléments peuvent indiquer la page nommée qu'ils veulent pour l'impression. En outre, les éléments du document source peuvent forcer les sauts de page. Voici un extrait de la feuille de style que nous avons utilisée:
@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }Ayant un éditeur basé aux États-Unis, on nous a donné la taille de la page en pouces. Nous, Européens, avons continué avec des mesures métriques. CSS accepte les deux.
Après avoir configuré la taille et la marge de la page, nous devions nous assurer qu'il y a des sauts de page aux bons endroits. L'extrait suivant montre comment les sauts de page sont générés après les chapitres et annexes:
div.chapter, div.appendix { page-break-after: always; }Aussi, nous avons utilisé CSS2 pour déclarer les pages nommées:
div.titlepage { page: blank; }C'est-à-dire que la page de titre doit être imprimée sur les pages portant le nom "blank"."CSS2 a décrit le concept de pages nommées, mais leur valeur ne devient apparente que lorsque les en-têtes et les pieds de page sont disponibles .
Bref ...
Puisque vous voulez imprimer A4, vous aurez besoin de différentes dimensions bien sûr:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm; /* change the margins as you want them to be. */
}
L'article plonge dans des choses comme la définition de sauts de page, etc. donc, vous pourriez veulent lire complètement.
Dans votre cas, l'astuce consiste à créer le CSS d'impression en premier. La plupart des navigateurs modernes (>2005) prennent en charge le zoom et seront déjà en mesure d'afficher un site web basé sur le CSS d'impression.
Maintenant, vous voudrez rendre l'affichage web un peu différent et adapter l'ensemble du design pour s'adapter à la plupart des navigateurs (y compris les anciens, ceux d'avant 2005). Pour cela, vous devrez créer un fichier CSS web ou remplacer certaines parties de votre CSS d'impression. Lors de la création de CSS pour le web afficher, rappelez-vous qu'un navigateur peut avoir N'importe quelle taille (pensez: "mobile" jusqu'à "téléviseurs grand écran"). Signification: pour le CSS web, votre largeur de page et votre largeur d'image sont mieux définies en utilisant une largeur variable ( % ) pour prendre en charge autant de périphériques d'affichage et de clients de navigation web que possible.
MODIFIER (26-02-2015)
Aujourd'hui, je suis tombé sur un autre article plus récent chez SmashingMagazine {[6] } qui plonge également dans la conception pour l'impression avec HTML et CSS ... juste au cas où vous pourriez utiliser encore un autre tutoriel.
Il serait assez facile de forcer le navigateur web à afficher la page avec les mêmes dimensions de pixels que A4. Cependant, il peut y avoir quelques bizarreries quand les choses sont rendus.
En supposant que vos moniteurs affichent 72 dpi, Vous pouvez ajouter quelque chose comme ceci:
<!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>
A4 taille est de 210x297mm
Ainsi, vous pouvez définir la page HTML pour s'adapter à ces tailles avec CSS:
html,body{
height:297mm;
width:210mm;
}
Créez une section avec chaque page et utilisez le code ci-dessous pour ajuster les marges, la hauteur et la largeur.
Si vous imprimez au format A4.
Puis utilisateur
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;
}
Ensuite, créez un div avec tout votre contenu.
<div class="Section1">
type your content here...
</div>
Ou
@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;
}
J'ai utilisé HTML pour générer des rapports qui s'impriment correctement à des tailles réelles sur du papier réel.
Si vous utilisez soigneusement mm comme unités dans le fichier CSS, vous devriez être OK, au moins pour les pages simples. Les gens peuvent vous vis en changeant le zoom d'impression dans leur navigateur, cependant.
Je me souviens que tout ce que je faisais était une seule page, donc je n'avais pas à me soucier de la pagination - cela pourrait être beaucoup plus difficile.
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
Dans les style.css:
table.tableclassname {
width: 400px;
}
Dans votre print.css:
table.tableclassname {
width: 16 cm;
}
PPI et DPI ne font absolument aucune différence dans la façon dont un document imprimera un navigateur. l'imprimante ne prend aucune information sur la hauteur des points de l'écran ou le DPI des images, etc. si vous imprimez des images, elles imprimeraient à une taille similaire en proportion de la façon dont elles sont affichées à l'écran. le processeur d'impression du navigateur augmenterait le DPI des images de quelque chose de plutôt bas comme 72dpi à N'importe quel DPI le reste du document est. dire que l'image s'affiche comme une demi-page, puis son environ 4 " large physiquement. la largeur de pixel de l'image serait d'environ 300px pour s'afficher correctement dans le navigateur. au moment où il imprime à un 300DPI nominal, le processeur a ajouté des pixels et l'image passera à environ 1200px qui à 300 DPI est 4".
Quand il s'agit d'éléments vectoriels ou non basés sur des pixels comme le texte, l'imprimante choisit son propre DPI à partir du pilote qui ne se rapporte pas à la hauteur du point de l'écran ou à la largeur du navigateur, etc. si le navigateur est 3000px large, le processeur d'impression enveloppera le texte comme il convient.
Voici ce qui rend difficile la création d'affichages d'impression: chaque navigateur et imprimante interprétera les tailles de texte (pt, em, px) et l'espacement à sa manière. selon l'imprimante, le navigateur et peut-être même le système d'exploitation que vous utilisez, vous obtiendrez une quantité différente de lignes et de caractères par page. donc, même si vous testez sur votre ordinateur en utilisant votre navigateur et l'imprimante et comprendre que vous pouvez afficher le texte dans une boîte à 640x900px et son parfait sur l'impression, le prochain gars qui essaie d'imprimer éventuellement obtenir l'impression différemment. il n'y a vraiment aucun moyen de forcer chaque imprimante et chaque navigateur à l'obtenir identique à chaque fois.
Oubliez les pixels et pluspour oublier le DPI, la seule chose pour laquelle vous pouvez utiliser des pixels est de définir une largeur de table qui simule la largeur d'une zone imprimable sur votre imprimante. dans ce cas, j'ai trouvé que 640px large est proche.
À la recherche d'un problème similaire, j'ai trouvé ceci - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4 est un format de document, comme une image d'écran qui va dépendre de la résolution de l'image, par exemple un document A4 redimensionné à:
- 72 dpi (web) = 595 x 842 pixels
- 300 dpi (impression) = 2480 x 3508 pixels (C'est " A4 "comme je le sais, c'est-à-dire "210mm X 297mm @ 300 dpi")
- 600 dpi (imprimer) = 4960 x 7016 pixels
Je sais que ce sujet est assez vieux mais je veux partager mon expérience sur ce sujet. En fait, je cherchais un module qui peut m'aider avec mes rapports quotidiens. J'écris des documentations et des rapports en HTML + CSS ( au lieu de Word, Latex, OO, ...). L'objectif serait de les imprimer sur du papier A4 pour les partager avec des amis, ... Au lieu de chercher, j'ai décidé d'avoir une petite session de codage amusante pour implémenter une lib simple qui peut gérer "pages", numéro de page, résumé, en-tête, pied de page .... Enfin, je l'ai fait en ~ ~ 2h et je sais que ce n'est pas le meilleur outil de tous les temps mais c'est presque ok pour mon but. Vous pouvez jeter un oeil à ce projet sur mon repo et n'hésitez pas à partager vos idées. Ce n'est peut-être pas ce que vous recherchez à 100%, mais je pense que ce module peut vous aider.
Fondamentalement, je crée une page de corps "Largeur: 200mm;" et un conteneur de hauteur: 290mm (plus petit que A4). Ensuite, j'ai utilisé page-break-after: always; donc l'option "Imprimer" du navigateur sait quand fractionner les pages.
J'ai vu cette solution après avoir cherché sur google, recherchez "A4 CSS page template" (codepen.io). il montre une zone de taille A4 (A3, A5, également portrait) dans le navigateur, en utilisant la balise . A l'intérieur de cette balise, le contenu est affiché, mais la position absolue est toujours par rapport à la zone du navigateur.
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>Cela fonctionne pour moi sans aucune autre bibliothèque css/js à inclure. Fonctionne pour les navigateurs actuels (IE, FF, Chrome).
Techniquement, vous pourriez, mais il faudrait beaucoup de travail pour tous les navigateurs d'imprimer la page exactement comme il est affiché sur l'écran. En outre, la plupart des navigateurs forcent L'URL, la date d'impression et la numérotation des pages à l'impression, ce qui n'est pas toujours souhaité. Cela ne peut pas être modifié ou désactivé.
Au Lieu de cela, je conseillerais de créer un PDF basé sur le contenu à l'écran et de servir le PDF pour le téléchargement et/ou l'impression. Bien que la plupart des bibliothèques PDF disponibles soient payées, il y en a quelques-unes alternatives gratuites disponibles pour créer des fichiers PDF de base.
Il est tout à fait possible de définir votre mise en page pour prendre les proportions d'une page a4. Vous n'auriez qu'à définir la largeur et la hauteur en conséquence (éventuellement vérifier avec window.innerHeight et window.innerWidth bien que je ne sois pas sûr si c'est fiable).
La partie délicate est avec L'impression A4. Javascript par exemple ne prend en charge que l'impression de pages rudimentaire avec la méthode window.print.
Comme @ Prutswonder a suggéré de créer un PDF à partir de la page web est probablement la façon la plus sophistiquée de le faire (autre que fournir de la documentation PDF en premier lieu). Cependant, ce n'est pas aussi anodin qu'on pourrait le penser. Voici un lien qui contient une description d'une classe Java entièrement open source pour créer des fichiers PDF à partir de HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .
Évidemment, une fois que vous avez créé un PDF avec l'impression de proportions A4, il se traduira par une impression A4 propre de votre page. Si cela vaut l'investissement de temps est une autre question.
J'ai utilisé 680px dans les rapports commerciaux pour imprimer sur des pages A4 depuis 1998. Le 700px ne pouvait pas s'adapter correctement en fonction de la taille des marges. Les navigateurs modernes peuvent réduire la page pour adapter la page sur l'imprimante, mais si vous utilisez 680 pixels, vous imprimerez correctement dans presque tous les navigateurs.
C'est HTML pour vous Exécutez l'extrait de code et voyez le résultat 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:
Plusieurs façons de faire:
html,body{
height:297mm;
width:210mm;
}
html,body{
height:29.7cm;
width:21cm;
}
html,body{
height: 842px;
width: 595px;
}