4

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?

Kevin Brown
  • 8,805
  • 2
  • 20
  • 38
Mido
  • 133
  • 1
  • 10

1 Answers1

3

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

@media print 
{ 
.noPrint{display:none;} 
.noScreen{display:block;} 
}
Amit Kumar Singh
  • 4,393
  • 2
  • 9
  • 22