使用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

回答