web-dev-qa-db-fra.com

Firefox n'imprimant que la 1ère page

Je travaille sur css print friendly pour un site web. Il prévisualise/imprime parfaitement dans IE, mais Firefox (version 3.6) ne prévisualise/imprime que la 1ère page.

Est-ce que quelqu'un est au courant de quoi que ce soit qui pourrait généralement causer cela? Le balisage est assez compliqué, donc je ne sais pas par où commencer!

Merci.

Modifier

Cette solution n'a fait qu'empirer les choses.

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

On dirait que l'impression aspire juste en FF. Le client n'aimera pas entendre cela - j'espère qu'il n'utilise pas de FF!

firefoxprinting
32
ScottE

Le bogue depuis longtemps avec l'impression d'éléments positionnés de manière absolue a été corrigé dans Firefox 3.

Les problèmes relatifs aux pages manquantes sont suivis dans bug 521204 (recherchez dans la liste "dépend de"). Avez-vous des cadres ou de longs tableaux sur la page que vous essayez d’imprimer?

Et oui, l'impression dans Firefox est sous-exploitée, désolée, vous devez vous en occuper ...

3
Nickolay

Je viens de découvrir, que d'un élément avec 

display:inline-block;

seule la première page est imprimée et tout le reste est masqué. mettre ceci à 

display:block;

était la solution dans mon cas.

16
sinini

Si vous ne voulez pas passer en revue tout votre code, voici la seule chose que j'ai trouvée qui fonctionne pour moi sans gâcher tous mes autres CSS:

@media print {
  body {
    overflow: visible !important;
  }
}
13
bananabanana

J'avais le même problème. Il s'avère que la balise racine avait display: flex dessus. Après avoir changé ceci en display: block, le reste du contenu était affiché. Je vous recommande de consulter votre arborescence DOM et de vérifier chaque attribut display.

9
yakka

J'ai essayé une douzaine de correctifs pour cela et, finalement, tout ce dont j'avais besoin était:

@media print {
  body {
    display: block;
  }
}
5
NilsyNils

J'ai eu le même problème parce que la height de body est définie sur 100%, après que j'ai modifié pour height: auto dans mon print.css, cela a fonctionné.

@media print {
  body {
    height: auto;
  }
}
5
katwhocodes

Après de nombreuses recherches et essais, j'ai trouvé cet article de A list apart. J'étais sceptique parce que c'est si vieux mais ça dit que:

Si un élément flottant dépasse le bas d'une page imprimée, le reste du flottant disparaîtra dans la mesure où il ne sera pas imprimé sur la page suivante.

Comme j'ai un gros conteneur flottant, j'ai pensé essayer. J'ai donc fait un mélange d’autres réponses et de cet article et je suis arrivé à ceci: 

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

Donc en gros:

  1. Définition du corps sur overflow: visible
  2. Définissez les éléments qui se comportent comme des wrappers sur display: block, éliminez tous les styles flex et réinitialisez la hauteur si nécessaire.
  3. Éliminer float sur les longs conteneurs

Ce mélange a fonctionné pour moi! Je suis tellement heureuse que je pensais partager :)

3
ithil

pour moi (bootstrap 4) la solution était 

@media print {
    .row {
      display: block;
    }
}
2
srghma

ce qui suit fonctionne pour moi.

@media print {
  .field--body table tr {
    display: table-row-group !important;
  }
}
1
hhvardan

Si vous ne parvenez pas à surmonter les limites de Firefox en matière d’impression, vous pouvez convertir la page en PDF. Si vous êtes prêt pour cette option, Prince XML est une bibliothèque que je vous recommande vivement. Il a un très bon support CSS, y compris les médias imprimés.

1
Jacob

J'ai essayé d'ajouter @media print comme suggéré dans cette réponse sous la forme d'une définition style à l'élément <body> de la page, mais Firefox (60.0 (64 bits), Windows 7 64/Pro) reste tronqué. .

Ensuite, j'ai remarqué une case à cocher intitulée Simplifier la page en haut de l'écran Aperçu avant impression de Firefox:  enter image description here

Lorsque j'ai coché cette case, Firefox a retiré une partie du style, mais l'écran Aperçu avant impression s'est actualisé pour inclure toutes les pages du site!

Je ne sais pas à quel point cela s'applique si largement, mais ça vaut le coup d'essayer! Jusqu'à présent, je n'ai pas trouvé de solution comparable pour Chrome (version 65.0.3325.162 (version officielle) (64 bits)).

PS: après expérience, je constate que Simplifier la page supprime non seulement le style, mais également des éléments entiers tels que des exemples de section de code. Veillez donc à lire attentivement les résultats avant l'impression.

0
CODE-REaD

J'ai eu le même problème et j'ai remplacé position de position:relative à position: absolute par height: 100% du div haut en bas.

0
Vichu

Firefox n'aspire absolument pas. Cependant, parfois, il adhère plus strictement aux normes que les autres navigateurs. Quoi qu’il en soit, j’ai eu le même problème, c’est-à-dire que firefox n’imprimait (ne prévisualisait également) que les 2 premières pages d’un rapport multipage, construit avec un long tableau, produit par une de mes pages Web. Après un certain débogage, j'ai découvert que j'avais inclus la plupart du contenu du rapport dans un élément span avec un style {display: inline-block;}, entre autres. Dès que j'ai enlevé que la pagination était parfaite ... 

0
Mario