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

Question

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

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

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

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

更新

我在主要部分有一个 .scroll-y class，如果我用这个 css 打印：

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

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

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

Answer 1

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

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

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

Answer 2

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

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

所以 .scroll-y 占据了所有需要的 space，正文将增长到正确的打印尺寸。当然，您必须添加 html 元素来打印分页符，以典型打印尺寸（即 A4）预览打印视图，并在需要分页打印元素的地方添加

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

与 css:

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

Answer 3

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

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

using Vuetify, when i try to print a page it only shows the first one