Highlighted

<cfdocument> css, pdf, and table borders

Community Beginner ,
Dec 08, 2015

Copy link to clipboard

Copied

I'm using <cfdocument> to generate a PDF that contains tables. I have all of my style declarations within the <cfdocument> and those styles are being read properly.

My problem is that if I set a background-color for a row, that color overflows onto about half of the right and bottom table borders. Here's an image of what I'm seeing on the PDF document, colors are for visual identification of each border. The PDF prints with the same anomalies.

cssTablePDF.gif

The table border is 1.5pt red line, which you can see on the left and top just fine, but the right and bottom borders are thinner. The rows numbered 1, 2, and 4 all have a class applied to the <tr> providing a background-color (#fff or #eee). To prove what I thought was happening, I adjusted row 3 so that there is no background-color declared at all. Note that row 3 has the proper width for the right table border. Other testing has shown that the background-color is affecting the bottom table border as well.

Can I do something to the <tr> classes (.even and .odd) to prevent this from happening?

Here's my style declarations:

    <style>
   table.courselist {border: 1.5pt solid #c00;}
   table.courselist th.top {border-right: 1pt solid #00C; border-bottom: 1pt solid #00c; padding: 2px 5px;}
   table.courselist th.topright {border-bottom: 1pt solid #00c; padding: 2px 5px;}
   table.courselist th.main, td.main {border-right: 1pt solid #0C0; padding: 2px 5px;}
   table.courselist th.right, td.right {padding: 2px 5px;}
   .xsmall {font-size: small; color: #000;}
   .even {color: #000; background-color: #eee;}
   .odd {color: #000; background-color: #fff;}
   </style>

Thanks!

TOPICS
Reporting

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

<cfdocument> css, pdf, and table borders

Community Beginner ,
Dec 08, 2015

Copy link to clipboard

Copied

I'm using <cfdocument> to generate a PDF that contains tables. I have all of my style declarations within the <cfdocument> and those styles are being read properly.

My problem is that if I set a background-color for a row, that color overflows onto about half of the right and bottom table borders. Here's an image of what I'm seeing on the PDF document, colors are for visual identification of each border. The PDF prints with the same anomalies.

cssTablePDF.gif

The table border is 1.5pt red line, which you can see on the left and top just fine, but the right and bottom borders are thinner. The rows numbered 1, 2, and 4 all have a class applied to the <tr> providing a background-color (#fff or #eee). To prove what I thought was happening, I adjusted row 3 so that there is no background-color declared at all. Note that row 3 has the proper width for the right table border. Other testing has shown that the background-color is affecting the bottom table border as well.

Can I do something to the <tr> classes (.even and .odd) to prevent this from happening?

Here's my style declarations:

    <style>
   table.courselist {border: 1.5pt solid #c00;}
   table.courselist th.top {border-right: 1pt solid #00C; border-bottom: 1pt solid #00c; padding: 2px 5px;}
   table.courselist th.topright {border-bottom: 1pt solid #00c; padding: 2px 5px;}
   table.courselist th.main, td.main {border-right: 1pt solid #0C0; padding: 2px 5px;}
   table.courselist th.right, td.right {padding: 2px 5px;}
   .xsmall {font-size: small; color: #000;}
   .even {color: #000; background-color: #eee;}
   .odd {color: #000; background-color: #fff;}
   </style>

Thanks!

TOPICS
Reporting

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 08, 2015 0
Engaged ,
Dec 09, 2015

Copy link to clipboard

Copied

Which version of ColdFusion are you using?  (It may not actually matter.)

My clients noticed this and many other rendering issues when using CFDocument, so we experimented with generating HTML files (using CSS with absolute positioning, SVG images, WebFonts, etc) and then used the free command-line program WKHTMLTOPDF to convert it to a PDF.  Using this method, we were even able to add HTML to headers & footers. We could also force sections to stay together by using CSS "page-break-inside:avoid".  In addition to looking better, generation time was faster (or could be offloaded in the background without using a CFThread) and the file sizes were smaller.

Generating PDFs using ColdFusion & WKHTMLTOPDF

http://gamesover2600.tumblr.com/post/125851537339/generating-pdfs-using-coldfusion-wkhtmltopdf

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2015 1
Community Beginner ,
Dec 09, 2015

Copy link to clipboard

Copied

So, use a smarter tool. Interesting. Thanks for the blog link

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2015 0
Jamo LATEST
Engaged ,
Dec 09, 2015

Copy link to clipboard

Copied

It's been the best decision for us as it provides consistent quality irregardless of which version of ColdFusion we are using.  I can also use a scheduler and batch process static HTML files in the background without having to use ColdFusion.  (The EXE files appear to be portable too.) It uses a headless WebKit browser to render the pages... so if it looks good i Chrome, your PDF will look good too.

You can test WKHTMLTOPDF by downloading it to your PC and then running the simple command line to convert any webpage to a PDF:

    wkhtmltopdf http://google.com google.pdf

NOTE: Use "WKHTMLTOImage" to save the webpage as an image.

From there, you can experiment and add many other parameters to customize/optimize the PDF that CFDocument doesn't provide.

http://wkhtmltopdf.org/usage/wkhtmltopdf.txt

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2015 1