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

【问题标题】：using Vuetify, when i try to print a page it only shows the first one使用 Vuetify，当我尝试打印页面时，它只显示第一个页面
【发布时间】：2023-03-03 01:18:01
【问题描述】：

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

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

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

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

更新

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

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

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

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

【问题讨论】：

您使用的是v-data-table吗？我假设滚动条只是可用数据的反映（比如分页？）。如果没有，您必须在打印时调整您的 css 以不滚动，例如使用@media screen 和@media print 规则。
我正在使用v-data-table，但没有分页，我也在使用@media print css，请参阅我的更新
为什么需要height ？使用绝对定位？
因为我使用 vuetify，它使 body 的高度为 100vh，这显然不适用于打印。
不能只使用5000px 而不是将其设置为100% 或auto（重要吗？）。另外我注意到如果您使用FF，这个问题可能与您有关? github.com/vuetifyjs/vuetify/issues/2757

标签： printing vue.js vuejs2 vuetify.js

【解决方案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;
 }

【讨论】：

我怎么知道在哪里添加<div class="print-break-page"></div> 内容是动态的？
我对网页进行打印预览，并根据我所看到的，选择将这个 div 放在哪里来破坏内容。例如，如果您有一个元素列表并在预览中看到第 21 个元素在页面和下一个元素之间交叉，那么在第 21 个元素之前，放置这个 div。
即使我能做到这一点，这很难，因为数据是动态的，我仍然依赖于屏幕尺寸，因为在较小的屏幕上我会看到更少的元素
如果不分析 HTML 页面结构很难准确地说，但另一个标准是为元素的每个部分添加此 CSS 属性 page-break-after: auto。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：