我有一个使用
Vuetify构建的应用程序.
UPDATE
我在主要部分有一个.scroll-y类,如果我使用这个css进行打印:
@media print{ body,html { height: 5000px !important; } .scroll-y { height: 100% !important; } }
它有效,但显然我不希望每个印刷品的设定高度为5000px,
我可以使用js计算高度并设置它,但我想知道是否有更好/更简单的方法?
解决方法
你必须改变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; }