Comment faire des pages HTML imprimer à une taille cohérente de Chrome?
Je conçois un ensemble de pages HTML à imprimer, et je veux que les éléments des pages finissent à la même échelle les uns que les autres. Par exemple, il y a une classe de div dont la largeur est définie comme 200px large apparaît sur chacune de plusieurs pages. Je veux qu'il apparaisse exactement de la même taille lorsque chaque page est imprimée (adapté, par exemple, à la découpe et à la superposition).
J'utilise quelques choses qui fonctionnent le mieux dans Chrome (principalement la règle de zoom CSS pour avoir des copies plus petites d'éléments ailleurs), donc idéalement, je voudrais continuer à utiliser Chrome. (Ce serait plus facile dans Firefox, car il a un rapport d'échelle explicite dans la boîte de dialogue d'impression.) Mais il semble que sur Chrome, garder le même élément d'une taille cohérente lorsqu'il est imprimé {[6] } à partir de différentes pages est loin d'être facile.
La génération PDF de Chrome (qui est ce que L'impression à partir de Chrome fait sous le capot) semble choisir une section pour définir la largeur de la page, et mettre à l'échelle le reste de la page en fonction de cela. Ou peut-être qu'il essaie de définir le taille de la page pour s'adapter à un "optimale" nombre d'éléments sur une page. Si les éléments d'encadrement extérieurs de chaque page ne sont pas de la même taille dans tous les cas, il semble que les éléments avec une taille d'écran 200px puissent sortir de 3-4 cm à 1.5-2cm ou peut-être plus petits.
Le simple fait d'utiliser @page size n'aide pas: j'ai ce CSS et cela ne fait aucune différence:
@media print {
@ page size: 297mm 210mm
}
Quelqu'un a-t-il des idées sur la façon d'imprimer des choses avec des tailles cohérentes?
Une solution de contournement extrême I pourrait appliquer est de faire toutes les parties d'une grande page HTML, et utiliser Javascript pour marquer certaines parties comme les seules parties à imprimer... Je ne suis même pas sûr que cela fonctionnerait, et ce serait plutôt plus propre aux choses vives sur quelques pages différentes. Alors y at-il d'autres idées?
4 réponses
J'ai trouvé une solution. La clé est de s'assurer que dans chaque document, la" page logique " dans laquelle Chrome divise les éléments pour l'impression est de la même taille. Par exemple, si un document a beaucoup de carrés 200x200px et que Chrome décide de les regrouper dans un rectangle 5x4 pour imprimer un paysage, vous devez vous assurer que Chrome imprimera tous les autres documents cohérents divisés en éléments de taille 1000x800px.
Pour les documents qui sont simplement un certain nombre de travées ou de divs en bloc en ligne suffit d'avoir un div défini exactement sur la largeur de votre choix (1100px), et assurez-vous que ce div occupe la largeur de la page entière dans l'aperçu avant impression. Ensuite, assurez-vous simplement que votre CSS contient quelque chose comme:
@media print {
@page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
Si cela ne suffit pas, alors tout mettre dans un ou plusieurs divs avec une taille fixe (width: 1100px; height: 800px; overflow: hidden;) fait le travail, comme un moyen de forcer Chrome à diviser en pages que vous voulez (et donc garder les éléments de la même taille lors de l'impression).
Autorisez différentes tailles, mais contrôlez les marges et le design de chaque taille!
Lors de la première réponse, J'utilisais Chrome 32.0.1700.107 m
La norme W3 CSS3 établie pour les tailles de page fonctionne très bien avec l'option "Enregistrer au format PDF" directement à partir du plugin de Chrome sur l'interface d'impression.
J'ai eu des années de problèmes avec différentes interfaces et solutions de contournement pour différents projets (par exemple: générer des PDF directement à partir du serveur qui était trop lourd dans traitement et désordre dans le code, ou dire aux utilisateurs d'utiliser l'interface d'impression windows, etc.). C'est une grande solution pour moi et semble être définitif!
Voici un exemple parfait de la même page, avec des options pour les marges D'impression au format A4 et au format Lettre:
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
}
Vous pouvez répliquer autant de fois que vous le souhaitez en utilisant différents formats de papier. Valeurs supplémentaires (couleurs, éléments cachés, etc.) irait à l'extérieur @page.
En outre, si le format de papier est A4 et protrait vous pouvez également utiliser ce
@page {
size: A4 landscape;
}
Cela fonctionne dans Chrome
Vos requêtes média at-rules sont mal structurées. essayez:
@media print {
@page {
size:297mm 210mm;
}
}Cela fournit au moins la syntaxe correcte. quant à la propriété size, elle a été supprimée de css2.1 et le support du navigateur varie. vous pouvez toujours ensemble width, margin, et/ou padding