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

Question

我有一个使用Vuetify构建的应用。

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

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

如何让它显示所有其他要打印的页面？

更新

如果我使用此css进行打印，我在主要部分有一个.scroll-y类：

 @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;
 }

Answer 2

您必须更改主要部分（我的示例中的正文）的溢出和高度：

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

链接到codepen上的演示： https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100（您可以从那里导出）

Answer 3

感谢@Ander和@ g.annunziata指出我正确的方向，对我有用的最终设置是：

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