打印 – 使用Vuetify,当我尝试打印页面时,它只显示第一个页面

我有一个使用 Vuetify构建的应用程序.

其中一个页面用于订单,我希望用户能够打印它.

问题是如果我在页面中滚动,只有第一页显示滚动条：

如何让它显示所有其他页面以进行打印？

UPDATE

我在主要部分有一个.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占用了所需的所有空间,并且身体将长大到正确的印刷尺寸.
当然,你必须添加html元素来打印@R_989_6404@,在典型的打印尺寸(即A4)上预览打印视图,并添加需要分解打印元素的地方

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

用css：

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