Search code examples
javascripthtmlcssprintingflying-saucer

Splitting HTML Table into Groups of Columns


I would like to print very wide (and possibly tall) HTML tables as PDF. The tables are generated using Handlebars templates in Javascript, the bit that does HTML to PDF is a Spring based Java server which is using Flying Saucer.

I know that, usually, printing is done with a separate print.css file, with setting the paper to landscape, etc. However, I have been unable to come up with a way to split tables vertically.

So what I think could be done here is to print large tables as, e.g., 2x2 arrays of A4 pages.

A table that looks like this:

+----+----+----+----+----+----+
|____|____|____|____|____|____|
|____|____|____|____|____|____|
|____|____|____|____|____|____|
|____|____|____|____|____|____|

Should become this before it goes to the printer (or before being put into PDFs):

Page 1             Page 2
+----+----+----+   +----+----+----+
|____|____|____|   |____|____|____|
|____|____|____|   |____|____|____|

Page 3             Page 4
+----+----+----+   +----+----+----+
|____|____|____|   |____|____|____|
|____|____|____|   |____|____|____|

As an additional constraint, the table header can be somewhat complex, with some colspan="x" and rowspan="2" attributes. It's never more than 2 rows of headers, but a 'grouping' column on the first row can span more than 2 columns in the second row, such as

+-----------------------------------------------------------------------+
|                       |    Group1     |       |       Group2          |
| Head1 | Head2 | Head3 | Head4 | Head5 | Head6 | Head7 | Head8 | Head9 |

Actual Question

With all this in mind, do I have any other option than using something like jQuery to go through the columns, break the table into smaller tables (while taking into account not to break column groups) and append the broken up rows to the subtables accordingly?


Solution

  • I've been researching how to do this and as far as I can tell there is no way to do this without using a lot of JavaScript to do quite a lot of manipulation.

    The first answer here is what I'm going to use as a starting point: Print a very wide HTML table without clipping right hand side

    Hopefully that helps.