web-dev-qa-db-fra.com

Comment imprimer des pages HTML à une taille cohérente à partir 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 existe une classe de div dont la largeur est définie comme une largeur de 200 pixels apparaît sur chacune des plusieurs pages. Je veux qu'elle apparaisse exactement de la même taille lorsque chaque page est imprimée (adaptée, par exemple, à la découpe et à la superposition).

J'utilise quelques éléments qui fonctionnent le mieux dans Chrome (principalement la règle de zoom CSS pour avoir de plus petites copies d'éléments ailleurs), donc, idéalement, j'aimerais continuer à utiliser Chrome. (Cela être 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, en gardant le même élément une taille cohérente lors de l'impression à partir de pages différentes est loin d'être facile.

Chrome PDF generation (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 basée sur cela. Ou peut-être qu'il essaie de définir la taille de la page pour s'adapter à un nombre "optimal" d'éléments sur une page. Si les éléments de cadrage extérieurs de chaque page ne sont pas de la même taille dans tous les cas, alors il semble que les éléments avec une taille d'écran de 200 pixels peut sortir de 3-4 cm à 1,5-2 cm ou peut-être plus petit.

Utiliser simplement @page size n'aide pas: j'ai ce CSS et ça 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 les choses avec des tailles cohérentes?

Une solution de contournement extrême que je pourrais appliquer est de les faire toutes les parties d'une grande page HTML, et d'utiliser Javascript pour marquer certaines parties comme les seules parties à imprimer ... Je ne suis même pas sûr si cela fonctionnerait, et ça ' d soyez plutôt plus propre pour les choses vives sur quelques pages différentes. Y a-t-il d'autres idées?

htmlcssgoogle-chromeprintingprint-css
27
AlexC

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 de 200x200px et Chrome décide de les regrouper dans un rectangle 5x4 pour imprimer le paysage, alors 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 d'étendues ou de divs de bloc en ligne dans l'ordre, il suffit d'avoir un div défini exactement à la largeur choisie (1100px) et de s'assurer que ce div occupe la pleine largeur de la page dans l'aperçu avant impression. Assurez-vous ensuite 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, mettez tout dans une ou plusieurs divs de 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 conserver les éléments de la même taille lors de l'impression).

16
AlexC

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

Le norme W3 CSS3 établie pour les tailles de page fonctionne très bien avec l'option "ENREGISTRER COMME PDF" directement à partir du plug-in de Chrome sur l'interface d'impression.

J'ai eu des années de problèmes avec différentes interfaces et solutions de remise des gaz pour différents projets (par exemple: générer des PDF directement à partir d'un serveur trop lourd en traitement et trop compliqué en code, ou dire aux utilisateurs d'utiliser l'interface d'impression Windows, etc.). Celui-ci est une excellente 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 Letter:

/* 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. Des valeurs supplémentaires (couleurs, éléments cachés, etc.) iraient en dehors de @page.

8
DavidTaubmann

De plus, si le format de papier est A4 et protégé, vous pouvez également utiliser ce

@page {
    size: A4 landscape;
}

Cela fonctionne dans Chrome

5
G.Georgiou

vos requêtes médias at-rules sont mal structurées. essayer:

@media print {  
    @page {  
      size:297mm 210mm;  
    }  
}

qui fournit au moins la syntaxe correcte. quant à la propriété size, elle a été supprimée de css2.1 et la prise en charge du navigateur varie. vous pouvez toujours définir width, margin et/ou padding

1
albert