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媒体打印查询

回答

相关问题