javascript 命令无法使用媒体查询打印答案

【问题标题】：Media query print doesn't work by javascript commandjavascript 命令无法使用媒体查询打印
【发布时间】：2016-06-21 20:41:17
【问题描述】：

我正在使用媒体查询打印构建一个 html 报告。到目前为止，一切都运行良好，直到我在执行 JavaScript 命令“window.print()”的页面上添加了一个“打印”按钮。通过使用快捷键（Ctrl + P），我的网络浏览器根据媒体打印显示打印预览，但是，当我单击“打印”按钮时，媒体查询规则被忽略。

现在有人可以解决吗？

@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;
  }
}

【问题讨论】：

你能展示你对打印按钮的实现吗？
我在使用 React 和 styled-components 的 Chrome 中遇到了同样的问题

标签： javascript html css printing media-queries

【解决方案1】：

它确实有效...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>

【讨论】：