媒體查詢打印不能通過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; 
    } 
}

來源

2016-03-08 M. A. Cordeiro

你能告訴你的打印按鈕的執行？ – 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>

來源

2016-03-08 03:48:59

媒體查詢打印不能通過JavaScript命令工作

回答

相關問題