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.