sử dụng Vuetify, khi tôi cố gắng in một trang, nó chỉ hiển thị trang đầu tiên

Question

Tôi có một ứng dụng được tạo bằng cách sử dụng Vuetify.

Một trong các trang được sử dụng cho các đơn hàng và tôi muốn người dùng có thể in nó.

Vấn đề là nếu tôi đã di chuyển trong trang, chỉ có trang đầu tiên cho thấy có một thanh cuộn:

Làm thế nào tôi có thể làm cho nó hiển thị tất cả các trang khác để in?

CẬP NHẬT

Tôi có một lớp .scroll-y vào phần chính, nếu tôi sử dụng css này cho in:

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

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

nó hoạt động, nhưng rõ ràng là tôi không muốn có một chiều cao bộ 5000px cho mỗi bản in, Tôi có thể sử dụng js để tính toán chiều cao và đặt nó nhưng tôi tự hỏi nếu có một cách tốt hơn/dễ dàng hơn?

Answer 1

Bạn phải thay đổi tràn và chiều cao của phần chính (cơ thể trên ví dụ của tôi):

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

Liên kết với các bản demo trên codepen: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (bạn có thể xuất nó thành có)

Answer 2

Bạn phải thay đổi CSS, thêm một cái gì đó như thế này:

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

Vì vậy .scroll-y chiếm tất cả các không gian cần thiết, một d cơ thể sẽ phát triển lên đến kích thước in đúng. Tất nhiên bạn phải bổ sung thêm các yếu tố html cho ngắt trang in ấn, in bản xem trước của quan điểm của bạn về kích thước điển hình in (ví dụ A4) và thêm nơi cần một yếu tố chia tay in như

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

với css:

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

Answer 3

Nhờ @Ander và @ g.annunziata đã chỉ cho tôi đi đúng hướng, thiết lập chính thức mà làm việc cho tôi là:

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