This is the result when i use Wicked_pdf to convert my html.erb
page to pdf
.
Problem: Seem table
's tr
has been splitted into two pages.
What i tried without success:
page-break-inside
as described here or here
table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; }
Another option: place each tr in its own tbody and then apply the peage break css rules to the tbody. Tables support multiple tbodys. A bit of extra markup, but works decently for me.
I am using Ruby on Rails 4.2.6, Wicked_pdf latest version, bootstrap.
Relate issue on github
Question: How can i make table
's tr
not split into two pages.
Failed to load latest commit information. Wicked PDF uses the shell utility wkhtmltopdf to serve a PDF file to a user from HTML. In other words, rather than dealing with a PDF generation DSL of some sort, you simply write an HTML view as you would normally, then let Wicked PDF take care of the hard stuff.
I have struggled a lot with the issue, using latest h4cc/wkhtmltopdf-amd64 version 0.12.4 and finally made it working by downgrading the version of the package to 0.12.3! To avoid page break, We can use page break avoid css option. Break any content (Image/ Text) and make it appear in the next page
If you can't get page breaks working, try to divide and conquer by removing half the CSS in stages and seeing if it works. I found this ridiculous solution, but it's worked very well for me :) and then the table would not break. Another option: place each tr in its own tbody and then apply the peage break css rules to the tbody.
Pages break in the middle of text when you have elements longer than one page. This is a more complicated issue that there's no fix for currently, but the vast majority of page-break needs should have been resolved with v0.9.1.
well, to solve this you have to user page-break-inside: avoid !important;
with the repeated div the results in this overflow.
like if you have:
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
which results in overflow that will make things overlap with the header within the page breaks..
so >> use: page-break-inside: avoid !important;
with this class article
.
table.report-container div.article {
page-break-inside: avoid;
}
---> here is a full answer to print a page properly using html/css
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With