2017-12-27 90 views
7

我有一個使用Vuetify構建的應用程序。使用Vuetify,當我嘗試打印一個頁面時,它只顯示第一個頁面

其中一頁用於訂單,我希望用戶能夠打印它。

的問題是,如果我在頁面已滾動,僅在第一頁顯示有滾動條:

enter image description here

我怎樣才能使它顯示打印所有其他網頁?

UPDATE

我有一個.scroll-y類的主要部分,如果我用這個CSS的打印:

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

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

它的工作原理,但顯然我不想的一組高度5000px每打印, 我可以使用js來計算高度並設置它,但我想知道是否有更好/更簡單的方法?

+0

你是否使用了'v型數據table'?我假設滾動條只是可用數據的反映(如分頁?)。如果不是,你必須在打印時調整你的css以不滾動例如使用@media screen和@ media print規則。 – nathanvda

+0

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

+0

爲什麼你需要身體上的「高度」?使用絕對定位? – nathanvda

回答

2

你必須改變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; 
} 
+0

我怎麼知道在哪裏添加'

'內容是動態的? – Tomer

+0

我做網頁的打印預覽,並根據我所看到的,我選擇把這個div打破內容的地方。例如,如果你有一個元素列表,並在預覽中看到頁面和下一個元素之間交叉的第21個元素,那麼在第21個元素之前,放置這個div。 –

+0

即使我可以做到這一點,這是很難的,因爲數據是動態的,我仍然依賴於屏幕大小,因爲在較小的屏幕上,我會看到更少的元素 – Tomer

0

感謝@Ander和@ g.annunziata指着我在正確的方向,爲我工作的最終設置爲:

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