wicked_pdf
wicked_pdf copied to clipboard
mileszs
Background style for full PDF page
I'm having a tough time getting my background styles to cover the entirety of my PDFs. For example, I have a 2 page document where the content covers about 1.5 pages. My background styles applied to the body tag work for everything behind the 1.5 pages of content, but the last half of the second page just appears white on the background. Is there any way to style this area?
body {
background: red;
}
def generate
entry = Entry.find params[:id]
respond_to do |format|
format.pdf do
render :pdf => "entry_pdf",
:page_size => "Letter",
:layout => "layouts/pdf/basic.pdf.erb",
:template => "api/pdf/entry.pdf.erb",
:locals => {:entry => entry},
:margin => { :top => 10, :bottom => 10, :left => 0, :right => 0},
:background => true
end
end
end
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<%= wicked_pdf_stylesheet_link_tag "../app/stylesheets/print.css" -%>
</head>
<body>
<div id="pdf-content">
<%= yield %>
</div>
</body>
</html>
In the below example, I'd expect the white area below the content to have a red background.
Hello @hitchcockwill, I ran into that issue, solution was to set a height/min-height to the container, I'd say it will work if you add it to your body tag. For instance, for an A4 and after considering my layout I have my container height set to 1330px. You should start playing setting some values and increase the height if background does not cover the full page or decrease height if an extra empty page is generated.
For my particular layout I had to set the pdfs margins to 0. The margins specified on the controller's render method.
@efigarolam after reading your comment I thought that I'd be able to set a min-height per page and then just multiply that for additional pages (i.e. a 1 page doc would have a min-height of 1330px and a 2 page doc would have a min-height of 2660px).
Unfortunately, it looks like the page info (current page and total pages) are only available in the header and footer of the page so it's not as simple as grabbing the page count in the body and setting a min-height for multi-page documents. As far as I can tell, there's no way to determine how many pages will be generated using JS that's executed in the main body.
@hitchcockwill Same problem and I concluded as you did - no way to access page count.
However I solved it by calculating how many pages I need in my document and storing that in the document as a property. Since I am using erb in Rails, I can then calculate the page height.
See my template below. Note that for A4 I am using a page height of 28cm because I have a footer on each page. 28cm might not be the correct value for a margin of 10px, so that might need adjusting a little bit.
<body>
<div class="doc" style="height: <%= @proposal["number_of_pages"] * 28 %>cm;">
<div class="container">
<%= yield %>
</div>
</div>
</body>
rendered like this:
render pdf: 'show', layout: 'proposal_document.html.erb',
footer: { content: render_to_string(template: '/documents/footer.pdf.erb') },
margin: { top: 0, bottom: 10, left: 0, right: 0 }, viewport_size: '1280x1024'
If you do not know how many pages your content will take up beforehand, you can generate the PDF once, then count the pages with something like PDF::Reader, then regenerate it with the page numbering in the headers or footers.
@rmcsharry How did you calculate how many pages you required?
I didn't calculate. I know that beforehand. I could not find a way to do it dynamically (ie to calculate it as the pdf is created). But even so sometimes my code still gets it wrong so I threw it away.
@unixmonkey' s idea seems promising though
For me it worked doing on css: body { height: 100%, background-color: #F7F1FC; }
