CODEWITHSUNDEEP
javascripthtmlcssprinting
SirParselot
SirParselot

Reputation: 2700

window.print() acts like it will print but does nothing

I'm trying to print a simple document but nothing is being printed. When I click the print button it adds it to the print queue and almost immediately leaves the queue but nothing happens. The printer doesn't even act as if it's about to print. I have a print.css

@media print{
  * {
    display: none;
  }

  #preview {
    display: inline;
  }
  #preview input {
    display: none;
  }
}

and I've added

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

to my HTML. It pulls up the print menu and acts like it will print but does nothing. I've never tried this before so I may just be missing a key aspect of this but at the same time it seems right.

Code for the button

<input type="button" onclick="window.print()" value="print" />

Preview is the div that I am trying to print (I add the innerHTML in a function)

<body style="background-color: white; height: 100%; width: 100%" onload="buildForm()">
  <aside id="overlay">
    <section onclick="modal()"></section>
    <div id="preview"></div>
  </aside>

Also this is an Electron app if that has anything to do with it. Also yes, the printer does work. I can print from other sources assuming there's content to print.

Due to long amounts of code here is a jsfiddle to help break it up. Note This isn't going to work since it has node modules in the code since it is an Electron app

Upvotes: 0

Views: 1098

Answers (3)

SirParselot
SirParselot

Reputation: 2700

Turns out this was an issue with Electron since 0.37.x was released while missing the pdf.dll. You can copy it from 0.36.12 release and add it to the dist folder. Worked like a charm after that.

Upvotes: 0

jeffjenx
jeffjenx

Reputation: 17477

You need to unhide all of #preview children as well:

body * {display: none;}
#preview, #preview * {display: initial !important;}

Upvotes: 2

Mottie
Mottie

Reputation: 86433

Try this change:

HTML

<div id="preview"></div>

CSS

@media screen {
  #preview { display: none; }
}
@media print{
  * {
    display: none;
  }

  #preview {
    display: inline;
  }
  #preview input {
    display: none;
  }
}

Upvotes: 2

Related Questions