Comment faire des pages HTML à imprimer à une taille uniforme à partir de Chrome?
Je suis de la conception d'un ensemble de pages HTML à imprimer, et je veux éléments des pages à la fin de la même échelle que les autres. Par exemple, il y a une classe de div, dont la largeur est définie comme 200px de large s'affiche sur plusieurs pages. Je veux qu'il apparaisse précisément de la même taille lors de chaque page est imprimée (adapté pour, par exemple, la coupe et la superposition).
Je suis l'aide de quelques choses qui fonctionnent le mieux dans Chrome (principalement le CSS de zoom règle pour de plus petites copies des éléments d'ailleurs), donc, idéalement, j'aimerais continuer à utiliser google Chrome. (Ce serait plus facile dans Firefox, parce qu'il a explicitement échelle de rapport dans la boîte de dialogue imprimer.) Mais il semble que sur Chrome, en gardant le même élément de taille uniforme lors de l'impression à partir de différentes pages est loin d'être facile.
Google Chrome, la génération de PDF (qui est ce que l'impression à partir de Chrome n'sous le capot) semble chercher une section pour définir la largeur de la page, et à l'échelle du reste de la page sur cette base. Ou peut-être qu'il tente de définir la taille de la page pour s'adapter à un "optimale" nombre d'éléments sur une page. Si l'extérieur du cadrage des éléments de chaque page ne sont pas de la même taille, dans tous les cas, il semble alors comme des éléments avec la taille de l'écran 200px peut-il venir quelque chose de 3-4 cm à 1,5-2cm ou peut-être petites.
Juste en utilisant @page size
n'aide pas: j'ai un CSS et ce n'est pas faire la différence:
@media print {
@ page size: 297mm 210mm
}
Quelqu'un a des idées pour savoir comment les choses à imprimer grâce à la cohérence des tailles?
Un extrême je puisse appliquer la solution de contournement consiste à faire toutes les pièces d'une grande page HTML, et Javascript pour marquer certaines pièces comme les seules pièces à imprimer... je ne suis même pas sûr que si que j'avais de travail, et ce serait plutôt un nettoyant pour le vif des choses un peu différentes pages. Alors y at-il d'autres idées?
- L'erreur de base est l'espace entre le "@" et "page", et le manque de "{ }"... peut-être le point-virgule final pourrait être aussi bonne. Néanmoins, j'ai créé un ensemble de réponse pour le cas, puisque la solution mentionnée s'applique pour les pages de différentes tailles selon le type de papier que l'utilisateur a configuré dans son imprimante, et vous pouvez même définir la taille et beaucoup plus de choses avec les normes mentionnées à l'w3.
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé une solution. La clé est de s'assurer que dans chaque document, la "logique de la page" google Chrome divise éléments pour l'impression est la même taille. E. g. si un document a beaucoup de 200x200px carrés et Chrome décide de les regrouper en un rectangle 5x4 pour imprimer le paysage, alors vous devez vous assurer que Chrome imprimer tous les autres documents constante divisé en éléments de taille 1000x800px.
Pour les documents qui sont tout simplement un certain nombre de travées ou inline-block divs dans l'ordre, il suffit d'avoir un div exactement de votre choix de la largeur (1100px), et de s'assurer qu'div occupe toute la largeur de la page dans l'aperçu avant impression. Ensuite, assurez-vous que votre CSS contient quelque chose comme:
Si ce n'est pas suffisant, alors tout à l'intérieur d'un ou de plusieurs divs avec taille fixe (
width: 1100px; height: 800px; overflow: hidden;
) fait le job, comme un moyen de forcer google Chrome à split, dans les pages que vous voulez (et donc de garder ces éléments de la même taille lors de l'impression).Permettre de tailles différentes, mais le contrôle de chaque taille de marges et de design!
Lors de la première réponse, j'ai été en utilisant Chrome 32.0.1700.107 m
La W3 CSS3 norme établie pour les tailles de page fonctionne très bien avec l' "ENREGISTRER au format PDF" option directement à partir de google Chrome est un plugin sur l'interface de l'impression.
J'ai eu des années de problèmes avec les différentes interfaces et autour de solutions pour les différents proyects (par exemple: générer des fichiers PDF directement à partir du serveur qui était trop lourd dans le traitement et le désordre dans le code, ou de parler à des utilisateurs d'utiliser windows interface d'impression, etc). C'est une grande solution pour moi et semble être définitif!
Voici un parfait exemple de la même page, avec des options de format A4 et Lettre-taille de l'impression marges:
Vous pouvez reproduire autant de fois que vous le souhaitez à l'aide de différents formats de papier. Valeurs supplémentaires (les couleurs, les éléments cachés, etc.) serait aller à l'extérieur @page.
En outre, si la taille du papier est au format A4 et protrait vous pouvez également utiliser cette
Cela fonctionne dans Chrome
@page { size }
option, oui. Mais cela ne veut pas aider s'assurer que les deux documents différents à la fois l'impression d'un 200px div à la même taille que l'autre, cependant. La façon de le faire est de s'assurer que l'un div de l'désiré plein taille de la page (par exemple 1100px) toujours s'étend sur toute la largeur de la page, comme je le dis dans ma réponse.de vos règles media queries sont structurés de manière incorrecte. essayez:
qu'au moins fournit la syntaxe correcte. comme pour le
size
de la propriété, il a été abandonné à partir de css2.1 et de la prise en charge du navigateur varie. vous pouvez toujours définirwidth
,margin
, et/oupadding