1

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

Kevin Brown
  • 8,805
  • 2
  • 20
  • 38
bboybeatle
  • 549
  • 1
  • 8
  • 28
  • Set the div to display:none and then in your @media print CSS set it to display:block. This is in effect the opposite – Kevin Brown May 26 '18 at 16:45

1 Answers1

3

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

Kevin Brown
  • 8,805
  • 2
  • 20
  • 38