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

Question

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

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

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

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

UPDATE

.scroll-y如果我使用这个css进行打印,我在主要部分有一个类:

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

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

它工作,但显然我不希望每个打印的设置高度为5000px,我可以使用js来计算高度并设置它,但我想知道是否有更好/更简单的方法？

Answer 1

您必须更改 CSS，添加如下内容：

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

这样就.scroll-y占据了所有需要的空间，主体将增长到正确的打印尺寸。当然，您必须添加用于打印分页符的 html 元素，在典型打印尺寸（即 A4）上预览视图的打印，并在需要拆分打印元素的位置添加如下所示

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

与CSS：

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