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; } });
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!
I think this is jQuery 1.9
Not sure what you’re asking me about the snippet
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.
Care to elaborate more on what’s going on line #4?
“#another_element” …?
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.
Someone has released a new version of wkhtmltopdf (v12) which fixes these page breaks and headings without the need for these hacks. Awesome work:
https://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c87
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
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.