媒体查询打印不能通过JavaScript命令工作

问题描述：

我正在使用媒体查询打印生成HTML报告。到目前为止，一切都很顺利，直到我添加了一个执行JavaScript命令“window.print（）”的按钮。通过使用快捷方式（Ctrl + P），我的网络浏览器根据已设置的媒体打印显示打印预览，但是，通过尝试使用报告中包含的自定义按钮“打印”，媒体查询已被忽略。现在有人如何解决它？媒体查询打印不能通过JavaScript命令工作

@media print { 

    @page { 
    size: A4; 
    margin: 1cm 
    } 

    body * { 
    visibility: hidden; 
    } 

    .printArea, .printArea * { 
    visibility: visible; 
    } 

    .spacePrint{ 
    border: 1px solid #ccc; 
    } 

    .printArea { 
    margin-top :0; 
    position: fixed; 
    left: 0; 
    top: 0px; 
    } 
}

你能告诉你的打印按钮的执行？ – JanR

答

它确实有效... here's a sample。

经过Chrome，IE11和Edge测试。

function doPrint() { 
 

 
    window.print(); 
 

 
}

@media print { 
 
    @page { 
 
    size: A4; 
 
    margin: 5cm; 
 
    } 
 
    body * { 
 
    display: none; 
 
    } 
 
    body h1 { 
 
    display: block; 
 
    } 
 
}

<body> 
 
    <h1>Print Hello World!</h1> 
 
    <div>You cannot print me!</div> 
 
    <button onclick="doPrint()">Print Me!</button> 
 
</body>

媒体查询打印不能通过JavaScript命令工作

相关推荐