web-dev-qa-db-fra.com

en utilisant Vuetify, quand j'essaie d'imprimer une page, il ne montre que le premier

J'ai une application construite avec Vuetify . 

Une des pages est utilisée pour les commandes et je veux que l’utilisateur puisse l’imprimer.

Le problème est que si je fais défiler la page, seule la première page s'affiche avec une barre de défilement:

 enter image description here

Comment puis-je faire en sorte que toutes les autres pages soient imprimées?

UPDATE

J'ai une classe .scroll-y sur la section principale, si j'utilise ce css pour l'impression:

 @media print{
      body,
      html {
        height: 5000px !important;
      }

      .scroll-y {
        height: 100% !important;
      }
    }

cela fonctionne, mais évidemment, je ne veux pas d'une hauteur définie de 5000 px pour chaque impression, Je peux utiliser js pour calculer la hauteur et la définir, mais je me demande s'il existe un moyen meilleur/plus simple?

printingvue.jsvuejs2vuetify.js
7
Tomer

Vous devez changer CSS, en ajoutant quelque chose comme ceci:

@media print {
  body { 
    overflow: auto;
    height: auto; 
  }
  .scroll-y {
     height: auto;
     overflow: visible;
  }
}

Donc, .scroll-y a occupé tout l’espace nécessaire et le corps atteindra la taille imprimée droite. Bien sûr, vous devez ajouter des éléments HTML pour imprimer un saut de page, afficher un aperçu de l’affichage en format d’impression (par exemple, A4) et ajouter où besoin d'un élément d'impression de rupture comme 

 <div class="print-break-page"></div>

avec css:

 .print-break-page {
       page-break-after: always;
 }
3
g.annunziata

Vous devez modifier le débordement et la hauteur de la section principale (le corps de mon exemple):

@media print {
  body { 
    overflow: auto;
    height: auto; 
  }
}

Lien vers la démo sur codepen: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (vous pouvez l'exporter sous cette forme)

2
Ander

Merci à @Ander et @ g.annunziata de m'avoir orienté dans la bonne direction, la configuration finale qui a fonctionné pour moi était la suivante:

 body,
  .scroll-y {
    overflow: visible !important;
    height: auto !important;
  }
0
Tomer