Forcing transparency in html elements when converting page to PDF

4
votes

I am currently converting a web page to a format that can be easily printed to pdf while maintaining the same appearance. Many print to pdf tools do not allow you to print background images/colors so I am trying to get around that by putting a solid color image under the header elements of a table. Right now it looks something like this:

<img src="/image.png" width="100%" style="margin-bottom:-90px">
<table><th>Header1</th><th>Header2</th>...

This looks as if the header elements have a solid colored background when I view it normally using a browser but when trying to print to a pdf the <th> elements have a blank white background over the image. Is there a way to force these elements to be viewed as transparent with the text against the image? Or maybe there is an easier way to work around the background issue?

Edit:
So my real problem here was that I was trying to make a work around to make the page accessible to as many htmltopdf tools as possible, ultimately this was just not an option as it will always look different in one browser or the other and one printer will force margins while the other won't, etc. My solution to this was i created a simple app in php that printed the page using wkhtmltopdf, which I had to install on my server first. Once that was done the pdf looked good no matter the browser!

3
htmlcsspdfpdf-generation

3 Answers

2
votes

When you "Print to PDF" a web page, the first responsibility lies with your browser to create the print job.

And in this case they have to create a PostScript file for the job. (Only the next stage, when the virtual "PDF printer" comes into play, creates the PDF from this PostScript input. Unlike LibreOffice, OpenOffice and MS Office, browsers are not [yet] able to directly "Export to PDF". Update: Apparently, Chrome does: as yms explains in a comment: open print dialog, use printer selection dropdown list to choose "Save as PDF". However, I found that by default it does not print backgrounds.)

Now you must consider two things:

  1. Most browsers do have settings, which allow for "print images"/"don't print images" and "print background colors"/"don't print background colors" and some such.

    So you should first ask yourself:

    • What are the settings of my browser for printing?

    • Is my browser handing over PostScript to the PDF printer which has the colors as I want them?

    If no, it's not the PDF printer's fault.

  2. As for the transparency features: PostScript does not support transparency (only PDF does). Therefor transparent areas need to be "flattened" for PostScript output (that is, transformed into bitmap images which try to mimic the look of transparent objects).

    However, not all applications and browsers are doing a good job when it comes to this "flattening".

    As long as you need to "Print to PDF", there is no chance in hell to get real transparency into the PDF file (you'll only get the 'mimikry' bitmaps).

Transparency here will only start to happen, once browsers start to be able to "Export to PDF". Or you may find a third-party tool, which can directly convert from HTML to PDF (without using the print intermediate step that converts to a printable PostScript first).

1
votes

As @Kurt Pfeifle mentioned, the best option for you might be to use a tool that converts directly from HTML to PDF without going through a printer. Here are 2 free components that you could try:

0
votes

I found a solution in Google Chrome, It works for me on Windows 10 / Google Chrome Version 86.0.4240.111.

Just go to the end of the page before printing! Now, press Ctrl+P and select "save as pdf" from destination. You will have a PDF with Transparency!

If you do not go to the end of the html-page before printing, you will not have transparency!