wkhtmltopdf repeat on subsequent pages

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) {

    //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

        //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

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

            //insert the new table

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

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

8 comments on “wkhtmltopdf repeat on subsequent pages

  1. Julio July 12, 2013 12:19 pm

    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!

  2. admin July 12, 2013 12:24 pm

    I think this is jQuery 1.9

    Not sure what you’re asking me about the snippet

    • Julio July 12, 2013 12:31 pm


      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.

  3. Victor October 4, 2013 6:18 pm

    Care to elaborate more on what’s going on line #4?

    “#another_element” …?

    • admin October 4, 2013 6:26 pm

      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.

  4. Subha December 27, 2013 9:17 am


    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?


  5. Diego Delon September 25, 2014 10:37 am

    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.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>