How do I show a section when download div as PDF but hide it on screen

Question

I use xepOnline Formatter library to save a specific div as PDF file when the user press on a submit button. I ask here how to make a section not visible on screen while visible on the saved file. For more details here below I have a div which contains an image & a table. On Screen I want just to show the table without the image. Image should be appeared just 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 somebody of you find a way to do this?

Answer 1

You can use media query syntax for print command show your div there.

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