Media query print doesn't work by javascript command

Question

I'm building a html report using media query print. Up to this point everything was working well, until I added a "Print" button to the page that performs the JavaScript command "window.print()". By using the shortcut (Ctrl + P) my web browser shows the print preview according to the media print, however, when I click on the "Print" button, the media query rules is been ignored.

Does anyone now how to fix it?

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

I'm experiencing the same issue in Chrome using React and styled-components — feupeu
– feupeu, Commented May 10, 2019 at 10:23

Gopikrishna S · Accepted Answer · 2016-03-08 03:48:59Z

3

It does work ... here's a sample.

Tested in Chrome, IE11, and 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>

answered Mar 8, 2016 at 3:48

Gopikrishna S

2,4594 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samyok nepal · Accepted Answer · 2022-08-08 07:25:06Z

0

This can be fixed by waiting for the event queue to clear before calling window.print(). This code worked for me:

setTimeout(() => window.print(), 0);

answered Aug 8, 2022 at 7:25

samyok nepal

5573 silver badges17 bronze badges

Collectives™ on Stack Overflow

Media query print doesn't work by javascript command

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related