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

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

的问题是，如果我在页面已滚动，仅在第一页显示有滚动条：

我怎样才能使它显示打印所有其他网页？

UPDATE

我有一个.scroll-y类的主要部分，如果我用这个CSS的打印：

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

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

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

2017-12-27 Tomer

你是否使用了'v型数据table'？我假设滚动条只是可用数据的反映（如分页？）。如果不是，你必须在打印时调整你的css以不滚动例如使用@media screen和@ media print规则。 – nathanvda

我正在使用'v-data-table'但没有分页，而且我也在使用'@media print' css，查看我的更新 – Tomer

为什么你需要身体上的“高度”？使用绝对定位？ – nathanvda

你必须改变溢出和主要部分的（身体上我的例子）高度：

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

链接到演示上codepen： https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100（你可以将其导出形成有）

2018-01-09 08:29:21 Ander

你必须改变CSS，添加这样的事情：

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

所以.scroll-y占据所有空间需要，可以将d身体会长到正确的印刷尺寸。当然，你必须在增加了对打印分页符html元素，典型的打印尺寸（即A4）和添加视图的打印预览，其中需要一个分手的打印元素

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

与CSS：

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

2018-01-09 13:48:59

我怎么知道在哪里添加'

'内容是动态的？ – Tomer

我做网页的打印预览，并根据我所看到的，我选择把这个div打破内容的地方。例如，如果你有一个元素列表，并在预览中看到页面和下一个元素之间交叉的第21个元素，那么在第21个元素之前，放置这个div。 –

即使我可以做到这一点，这是很难的，因为数据是动态的，我仍然依赖于屏幕大小，因为在较小的屏幕上，我会看到更少的元素 – Tomer

感谢@Ander和@ g.annunziata指着我在正确的方向，为我工作的最终设置为：

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

2018-01-12 07:32:31 Tomer

回答