wkhtmltopdf has a bug as a result of a webkit bug. This means that the nice css styles for table printing don’t work in wkhtmltopdf.

Fortunately for us, wkhtmltopdf can handle JavaScript and that enables us to modify the DOM nicely prior to PDF creation.

Add the class ‘split_this_table’ to the table(s) you need to sort out over the page break, and then insert this code into the page in question:

$('.split_this_table').each(function(index, element) {

    //the height available is dependant on another item on the page
    var expanded_line = $('#another_element').size().height / 5;

    //manual calculation of the header size
    var per_page = 20 - expanded_line;

    //how many pages of rows have we got?
    var pages = Math.ceil($('tbody tr').length / per_page);

    //if we only have one page no more
    if (pages == 1) {
        return;
    }

    //get the table we're splutting
    var table_to_split = $(element);
    var current_page   = 1;

    //loop through each of our pages
    for (current_page = 1; current_page <= pages; current_page++) {

        //make a new copy of the table
        var cloned_table = table_to_split.clone();

        //remove rows on later pages
        $('tbody tr', table_to_split).each(function(loop, row_element) {

            //if we've reached our max
            if (loop >= per_page) {

                //get rid of the row
                $(row_element).remove();
            }
        });

        //loop through the other copy
        $('tbody tr', cloned_table).each(function(loop, row_element) {

            //if we are before our current page
            if (loop < per_page) {

                //remove that one
                $(row_element).remove();
            }
        });

        //insert the other table afdter the copy
        if (current_page < pages) {

            //insert the new table
            cloned_table.insertAfter(table_to_split);
        }

        //make a break
        cloned_table.css('page-break-before', 'always');

        //reset the table to the copy
        table_to_split = cloned_table;
    }
});

By admin

8 thought on “wkhtmltopdf repeat <th> on subsequent pages”
  1. This is great! Well done!
    But, which version of jQuery are you using?

    //jquery snippet
    //your code
    //table class=’split_this_table’

    Is this right?

    Thanks in advance!

    1. OK

      I’m asking you because it didn’t work here, I’m using jQuery 1.10.2, but I’ll try to change to 1.9 and see what happens.

    1. It’s not important to the final outcome. It was just an element I needed to fit it all in with. The code needed to just “format” my particular page. I /think/ anyway, I’ve not worked on that for a while.

  2. Hi,

    I tried this javascript for splitting my tables that needs to be rendered to a pdf. The table is getting splitted when displayed as html but the pdf generated is not having splitted tables. The issue I found is that on runtime the html code comes with splitted tags, but the actual html code has single .. tag which is sent for table creation.

    Any pointers on how to acheive this?

    TIA,
    Subha

  3. If you need a module that allow easy to thumbnail, snapshot or PDF generation from a url or a html you can take a look to MvlabsSnappy based on Snappy PHP (5.3+) wrapper for the wkhtmltopdf & wkhtmltoimage conversion utility.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.