Tuesday, March 20, 2012

ABCpdf for Reporting and Rendering Table Borders

This blog post only exists to prevent expired linking. My blog has moved to: http://pabloaizpiri.com/


ABCpdf Awesomeness and Reporting

I love using ABCpdf when working on a project that needs to generate PDF files. It is very powerful and flexible. One of the main reasons I love, have used, and convinced companies I work for to purchase ABCpdf is because it can render a PDF file from HTML- and not just as a big PDF image either.

Anway, the idea of HTML to PDF is extremely powerful- often times rather than use a reporting package that requires tons of work to modify a report to the exact custom request of a customer, I would much rather generate an HTML page and convert it to PDF or whatever reporting format is requried. (PDF seems to usually be the most popular) This is has become invaluable, as editing or creating new HTML pages that pull data is easy, straightforward, quick and powerful, and with the ability tocovert the output to PDF I can now send the PDFs as reports or have them available for download. I've frequently avoided nightmares when updating or adding to reports, and I've been able to modify reports very quickly using this model.

Rendering HTML Table Borders with ABCpdf

Recently I found a "bug" of sorts when rendering an HTML table border using ABCpdf. It's a bit of an odd bug. Essentially the borders become different thickness and really distract from the table. Since reports often include tables, having tables show up correclty and properly formatted is crucial- after all, this is one of the main reasons I like to generate reports in HTML and then convert to PDF: aesthetic flexibility.

A picture is worth a thousand words- here is a screenshot of the browser's rendering of a table border:

That's perfect. Just what I want. Now convert it to PDF:

Ouch... whatever happened to those table borders? It's odd- because if you zoom in on the PDF borders show up fine: 

At first I thought it might be due to not enough pixel density, and that maybe I just needed to increase the "browser width" and image resolution settings on ABCpdf so I would have a sharper image to sample from. Then I realized ABCpdf is going to try to parse the table, since it's not an image, so had to be a CSS issue. Obviously the borders were being created in some way that shows the right size at a certain zoom but is slightly off- enough to show when you use a fit-to-screen size.

Sure enough it was- and the fix was rather simple. I had a 'style="border 1px solid black"' on the table tag, and then the cells within the table also included inline styling data. For some reason ABCpdf is processing these borders that are defined twice- (first in the table as a whole and then in the cells as necessary)- as "overlapping". Removing the inline styling information from the table tag and leaving it on the cells corrected the issue:

Yes, yes, I shouldn't be using "inline" styles AND potentially this would not even have been a problem with a table-less div layout, but I was working with what I had and I wasn't about to rewrite the page if there was a reasonable quick fix. I did however, remove most of the inline styles and replace them with CSS classes... you do what you can. :)