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

Posted 2023-03-06

技术标签:

【中文标题】javascript 命令无法使用媒体查询打印【英文标题】：Media query print doesn't work by javascript command 【发布时间】：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 中遇到了同样的问题 【参考方案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>

【讨论】：

以上是关于javascript 命令无法使用媒体查询打印的主要内容，如果未能解决你的问题，请参考以下文章