How to show a section when loading a div in PDF format, but hide it on the screen

Question

I use the xepOnline Formatter library to save a specific div as a PDF file when the user clicks the submit button. I ask here how to make a section invisible on the screen while it is displayed in a saved file. For more information below, I have a div that contains an image and a table. On the screen, I want to just show a table without an image. The image should appear only on the downloaded file.

HTML

<div class="confirmation" id="output">
  <img src="image.jpg" class="noScreen" />
   <h3>Thank you. Your booking has been confirmed</h3>
    <table>
     <tr><td><b>Title</b></td><td>Name</td></tr>
    </table>
</div>
<button id="cmd">Download Invoice As PDF</button>

Css

@media screen
{
.noPrint{}
.noScreen{display:none;}
}
@media print
{
.noPrint{display:none;}
.noScreen{}
}

Javascript

$('#cmd').click(function () {
return xepOnline.Formatter.Format('output',{render:'download'});
});

Can any of you find a way to do this?

Answer 1

print, div.

@media print 
{ 
.noPrint{display:none;} 
.noScreen{display:block;} 
}