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

Question

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

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

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

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

更新

如果我将此 css 用于打印，我在主要部分有一个 .scroll-y 类:

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

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

它有效，但显然我不希望每次打印都设置 5000 像素的高度， 我可以使用 js 计算高度并进行设置，但我想知道是否有更好/更简单的方法？

Answer 1

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

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

所以 .scroll-y 占据了所有需要的空间，body 会增长到正确的打印尺寸。 当然，您必须添加用于打印分页符的 html 元素，以典型打印尺寸(即 A4)预览打印 View ，并在需要分页打印元素的地方添加

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

使用 CSS:

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