Hi i'm saving some html stuff with .pdf extension using dompdf.
The problem is that i made an header and a footer(using the dompdf script) and it looks fine as long as content does not fill the whole page.
The thing is that the header and the footer generated act like an absolute positioned div and the page content goes under them instead of jumping to the next page once the footer is reached.
Now, i know they are added after the html and it's normal that the text goes under but is there anyway(maybe with some kind of html/css solution) to make a solid div that, once "reached" by the div above makes it jump to the next free space available on the page?
Any work around?
Thanks in advance
I solved the problem giving the body tag a margin top equal to the header height and a margin bottom equal to the footer height this automatically applies to every page.
Related
I am new to dom pdf. I am loading footer image in all the pdf pages using DOM pdf.and banner image only in first page of pdf.
From second page i want to display another image in header part.
How can i achieve this?
The header and footer you use is DOM PDF are on every page the same. If you want to have different images on each page you can use your own css to archieve this.
If you only want page 1 to be different, you need to take a look [here].(dompdf: How to add header on every page except first?). That question is already treated.
I am using TCPDF to create PDFs with PHP. Everything works very nice, except when text would be placed where the footer resides. In my example, the text is shown only half, the rest is behind the footer. Is there an option which defines to put it on the next page?
Besides that, my PDFs differ from print to print, some have 1 page, some 2 or more. Is it possible to say that a specific text should only be placed on the page when it fits completely? if not, it should go to the next page.
I already have this in my code, but it doesnt help, the text is still cut.
$pdf->SetAutoPageBreak(true, 25);
I am creating the PDF by creating a huge HTML string and print that to the PDF using writeHTML. This is how it looks, the bold text on top should go to the next page, its hidden behind the footer.
Thanks!
We are in the process of importing some old pages from our legacy website which was designed in tables into our new DIV based layout. Our site is built on a PHP include system, so we have our pages split into three components; header, body, and footer. These old pages need to be pulled in for our launch of revision 1.0, and then as we get all of the wrinkles ironed out, we will redesign.
Our header component is working out just fine, and the body content displays as it should, but unfortunately the existing footer element plugs into the bottom of the table. Our footer for the new design extends for 100% of the width, but the existing table only allows for 960px width. Thus our footer is getting cut off.
We are trying to find a dynamic solution, either a using JavaScript, or the jQuery Attr() call to dynamically effect the table dimensions to allow the footer to extend to the edge of the page, yet everything I have tried does not modify the table dimensions or allow overfow to show at all.
Here are a couple of screenshots for you to see what I am talking about.
Div layout:
Table Layout:
If you like to take a peek at the code, you can look at my Demo Page, but just know that this is a demo version which is not using PHP to pull in the components. Its a simple HTML/CSS based layout I have been using to search for alternatives. (I'm not a PHP guy)
We are trying to avoid having to go through hundreds of documents and cutting and pasting the footer in below the table, or having to modify any other code by hand. If we could just include a CSS or JavaScript doc in the header that would render a workaround is the ideal solution.
You can also make a div with the footer Background - separate from the contents and underneath. Put a div with the same css styles as 'footer' after your element. Then you can take the background image (footer_bg.jpg repeat-x) off of footer.
See campdavidozarks.org for a website I made with the same idea.
Center the table, and use the same footer-background on the parent, 100% width element, too with alignment to the bottom and no-repeat on y. Done. Pure CSS solution.
I have a website that allows a user to save text content and then display it as is.
The user can use HTML tags to create his data the way he wants - design, fonts, divs, tables and so on...
To display the data been saved I direct the user to a page with a header/footer of my own and he's data in the middle. The problem happens when the user has some invalid HTML tags or un-closed ones, then it interfere with my own header/footer HTML and the whole page gets messed up.
Is there a way to encapsulate the user's data so it would not harm the page?
You can try to load it in iframe. Haven't tested it, but I think it should work.
you can use iframe with fixed width and height.
The Iframe suggestion are good but was not enough. Because i wanted it to show like it was a part of the page and I didn't know what is the length and size of the user data, the solution i've used is like that:
Created a page that shows the user data alone. Opened it in an iframe which was located between my main page header and footer.
Now for the trick - for when the user has a lot of data, to avoid scroll bars in the middle of the page i have used this script on the iframe onload event:
function setHeight()
{
//get page height
var the_height=
document.getElementById('userFrame').contentWindow.document.body.scrollHeight;
//set iframe height
document.getElementById('userFrame').height=the_height;
}
This way, when the page loads, the iframe height will change according to it's size, pushing the footer to the bottom.
After that just needed to set the iframe border to "none" and the page looks normal.
I am trying to export some dynamic content into a PDF file with a small bit of page formatting.
I'd like to have the PDF pages have a small padding with a border and then inside that border, a small company logo should appear up the top right on each page.
Now the issue is that because the content is dynamic, the number of pages and content per page can vary. This means I can't manually create a DIV with a border and an image inside because the content could be more or less pages depending on what gets exported.
I'm trying to find a way to create a 'page background' for each PDF page and then in this background I would then draw up the borders and the logo and then have all the content superimposed on this customer background.
Is this even at all possible with DOMPDF? Or are there any alternatives that may provide a little more customisation like this?
jfoucher's method could be what you need, but if you need an HTML content and/or a logo on each page, you could also use DOMPDF from the SVN trunk, and use fixed positionning, like if the "CSS position fixed" example here.
This is indeed possible with dompdf.
What I do is simply set the following CSS properties (or similar) on the body:
body{
background-image:url('/assets/img/bg_pdf.jpg');
background-repeat:no-repeat;
background-position: 15px 1450px;
}
In this case, I am using it for a page footer, but change these values according to your needs. The pixels values are obtained by trial and error... The background is an actual image, which you'll have to create in an image editor.