La prévisualisation de l'impression Chrome est différente de celle des DEVTools
j'ai mis en place une feuille de style imprimé et dans firefox il semble bien.
dans Chrome la page entière est cassée dans le aperçu avant impression (CTRL+P), mais si j'ouvre le Chrome DEVTools (F12) et d'utiliser le emulate CSS media fonction la page ressemble à firefox.
ce qui est bizarre, c'est que si j'ouvre à nouveau la prévisualisation d'impression, après avoir activé l'option émuler une fois, la page semble correct dans l'aperçu avant impression! Même Si je viens de l'activer et ensuite désactivez l'option emulate, l'aperçu d'impression est toujours correct après avoir fait cela!
mon empreinte.css commence par
@media print { ... }
et est inclus dans la page <head> comme ceci:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
j'ai essayé d'enlever le media="print" mais rien ne change.
4 réponses
j'ai rencontré le même problème de casse de tête et j'ai pu le résoudre.
dans mon cas, le problème a été causé par l'utilisation d'un custom @font-face pour le CSS "print" que je n'ai pas utilisé dans le CSS "screen".
il semblait que le navigateur ne chargeait pas le custom @font-face de la feuille de style d'impression pour la première prévisualisation et rendait la page plus ou moins vide. Il serait parfaitement rendu sur la deuxième prévisualisation d'impression.
ma solution était de charger le même @font-face règle de la pint css également dans l'écran css. De cette façon, la police est chargée par le navigateur lors de l'affichage de l'aperçu avant impression et tout fonctionne comme un charme.
pour ajouter à la réponse D'Ustice et au commentaire de Jeeva Jsb: vous devrez peut-être permettre au DOM de se déréglementer après avoir appliqué le transition: none !important la règle. Je l'ai accompli en ajoutant un print classe CSS à l'avant du corps I du programme imprimé de la page:
CSS:
body.print * {
transition: none !important;
}
JS (à l'aide de jQuery):
$('body').addClass('print');
setTimeout(function() {
window.print();
}, 0);
N'oubliez pas d'enlever le print classe une fois que votre utilisateur a fini d'imprimer la page. (Voircomment détecter la fenêtre.print() finition.)
Si vous n'avez pas trouver de solution dans les réponses alors j'ai quelque chose à dire à ce sujet:
in Chrome DEVTools print option dans emulation css media est seulement pour appliquer les règles CSS d'impression à la page, à des fins de test, il ne tient pas compte de toutes les autres choses qui vont de pair avec l'impression, il affiche la prévisualisation d'impression, mais parfois il n'affiche pas la page d'impression comme prévisualisation d'impression réelle.
si vous utilisez bootstrap alors si vous n'utilisez que col-md-* ou col-sm-* il ne fonctionnera pas, mais si vous utilisez col-xs-* alors cela fonctionnera car le problème est que la page elle-même est petite en termes de pixels, donc bootstrap pense qu'il doit appliquer le style xs.
et un navigateur différent se comporte différemment lors de l'impression de la page.La seule la meilleure façon de tester l'impression est d'imprimer, ou imprimer au format pdf.