CSS媒體打印查詢

我在modal中有一個工作@media print查詢。然後我添加了一個具有PRINT功能的圖表。當我在圖表中嘗試打印時，它不會在Chrome打印對話框中顯示任何內容。我在想，因爲@media print。CSS媒體打印查詢

如何在我的chart中添加modal的相同功能？

CSS媒體打印：

@media print { 
    @page { 
    size: auto; 
    margin: 3mm; 
    margin-right: 57mm; 
    margin-left: 57mm 
    } 

    body * { 
    visibility: hidden; 
    } 
    #admissionSlip * { 
    visibility: visible; 
    overflow: visible; 
    } 
    #chart * { 
    visibility: visible; 
    overflow: visible; 
    } 
    #mainPage * { 
    display: none; 
    } 
    #printBtn { 
    display: none; 
    } 
    .modal { 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 0; 
    padding: 0; 
    min-height: 550px; 
    visibility: visible; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
    .modal-dialog { 
    visibility: visible !important; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
    li { 
    page-break-after: auto; 
    } 

    /* Chart */ 

    .panel { 
    visibility: visible !important; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
}

來源

2017-10-07 Marksmanship

如果你刪除了'body * {visibility：hidden;}'，那麼怎麼辦？ –

@KenjiMukai，它在圖表上工作，但是當我嘗試點擊模式部分中的打印時，顯示器變得混亂。 – Marksmanship

我解決了它的不那麼好主意，但它做了我所需要的。

予分離css文件的chartmedia print和modal和引用它在每個html文件。

我知道這不是一個好主意，這可能不是一個最佳實踐，但它做了我所需要的。謝謝。

來源

2017-10-09 12:10:57 Marksmanship

CSS媒體打印查詢

回答

相關問題