Vuetify를 사용하여 페이지를 인쇄하려고 하면 첫 번째 페이지만 표시됩니다.

Vuetify를 사용하여 페이지를 인쇄하려고 하면 첫 번째 페이지만 표시됩니다.

저는 Vuetify로 만든 앱을 가지고 있습니다.

그 페이지 중 하나는 주문에 사용되고 있기 때문에, 유저가 인쇄할 수 있도록 해 주었으면 합니다.

문제는 페이지에 스크롤이 있는 경우 첫 번째 페이지에만 스크롤바가 표시된다는 것입니다.

인쇄를 위해 다른 모든 페이지를 표시하려면 어떻게 해야 합니까?

갱신하다

나는 가지고 있다.scroll-y이 css를 인쇄에 사용하는 경우 메인 섹션의 클래스:

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

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

동작합니다만, 인쇄마다 5000px의 높이를 설정하고 싶은 것은 아니고, js를 사용해 높이를 계산해 설정할 수 있습니다만, 보다 쉽고 좋은 방법이 없을까요?

다음과 같이 CSS를 변경해야 합니다.

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

그렇게.scroll-y필요한 모든 공간을 차지하면 본체가 인쇄된 크기로 커집니다.물론 페이지 나누기, 일반적인 인쇄 크기(A4)의 뷰 미리보기 인쇄 및 분할 인쇄 요소가 필요한 부분을 추가하기 위해 html 요소를 추가해야 합니다.

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

css 포함:

 .print-break-page {
       page-break-after: always;
 }

메인 섹션(예시의 본문)의 오버플로와 높이를 변경해야 합니다.

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

codepen 데모 링크: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (여기서 내보낼 수 있습니다)

Thanks to @Ander and @g.annunziata for pointing me in the right direction, the final setup that worked for me was:

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

언급URL : https://stackoverflow.com/questions/47991628/using-vuetify-when-i-try-to-print-a-page-it-only-shows-the-first-one