Search code examples
htmlpdf-generationcss-to-pdf

css2pdf xepOnline Cloudformatter - Hide elements in html but display in PDF

http://www.cloudformatter.com/CSS2Pdf.Demos.PrintMedia

There is an option in this cloudformatter called 'noprint' which can be applied to elements which display on the html page but aren't added to the PDF. What I want is the opposite. I want elements not to appear on the html page but appear in the PDF.

Does anyone have experience with this?

Thanks

Solution

  • To my comment above, I created a simple fiddle for you.

    There is a block with class .printme which is set normally to display:none. Then in your @media print CSS rules you set that block to display:block. I left the sample from @cloudformatter the same so you can see that it hides one paragraph in the PDF and displays the other.

    While the input HTML would look like this:

    enter image description here

    As you can see in the fiddle in the raw HTML, one block displayed and the other is not because of this CSS:

    .printme { display:none;}
@media print {
  .noprint {display:none;}
  .printme {display:block;}
}

    http://jsfiddle.net/p4gnomkn/1/

    The result PDF shows one block hidden and your hidden block revealed. Of course that could be a div as large as you wish:

    enter image description here