Adamhumbug Posted August 25, 2023 Share Posted August 25, 2023 Hi All, I am creating a quote builder that has a display page showing all of the items that are in the quote. This has some divs that are a4 size representing the pages (this will be printed into pdf) When the content is longer than the container, how would i break this onto a new page (it would then be in a new div). I am not sure what language this would be so apologies if this is more likely JS than PHP. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 What is displaying the page? HTML? ? FPDF? If HTML then your css would handle the page breaks for you. Read up on that. If it is FPDF (or some other pdf generator) you would have to do with your php(?) code that is outputting the display Quote Link to comment Share on other sites More sharing options...
requinix Posted August 25, 2023 Share Posted August 25, 2023 DIVs representing pages is a weird way of doing this. Normally you don't and you just create a regular page... You can use CSS to affect printing, though, such as break-before and break-after. 1 Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 1 hour ago, ginerjm said: What is displaying the page? HTML? ? FPDF? If HTML then your css would handle the page breaks for you. Read up on that. If it is FPDF (or some other pdf generator) you would have to do with your php(?) code that is outputting the display it is html yes - i didnt commit to learning fpdf as i need a header and footer and there is a lot of style involved. Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 50 minutes ago, requinix said: DIVs representing pages is a weird way of doing this. Normally you don't and you just create a regular page... You can use CSS to affect printing, though, such as break-before and break-after. My reason for doing this is we need to be able to print it on paper and it needs a cover page as well as headers and footers. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 HTML does not print well on paper. Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 1 minute ago, ginerjm said: HTML does not print well on paper. Agreed, that is why i am creating a page that prints into PDF, can be mailed around and that document printed. Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 Just now, Adamhumbug said: Agreed, that is why i am creating a page that prints into PDF, can be mailed around and that document printed. I did have a go with FPDF a couple of years ago and didnt get very far so i thought i would look for another option. What i have so far looks good when Printed to PDF asside from the fact that it wraps half way through a line of text. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 So you are reading a pdf document. You said that this has "some divs". Are those really divs, as in html/css div tags? Or are you trying to say that you have divided the page up into sections when you prepare it for print? Quote Link to comment Share on other sites More sharing options...
requinix Posted August 25, 2023 Share Posted August 25, 2023 1 minute ago, Adamhumbug said: My reason for doing this is we need to be able to print it on paper and it needs a cover page as well as headers and footers. A cover page is just a DIV with a page break after. Headers and footers are harder: HTML and CSS don't really do those. There are hacks for specific browsers that can mostly do it, but really if you need these sorts of things then you should be generating PDFs. Depending what library you use, there may be some special markup you can use to specify a page header and footer. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 I guess I don't know what you want to do. I"m guessing you want to PRODUCE an output. that is formatted with special pages, then content pages and THEN you want to print it to a PDF print driver as your final document. I would suggest that you go back to fpdf and practice. Much easier once you learn it. Then you can do anything you want using your html to call the FPDF functions that will generate your actual output lines. I used it quite a bit at one point. Not lately tho, but not afraid to use it if it comes up in the future Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 7 minutes ago, ginerjm said: So you are reading a pdf document. You said that this has "some divs". Are those really divs, as in html/css div tags? Or are you trying to say that you have divided the page up into sections when you prepare it for print? Basically i am creating a page with no content apart from what i want to be in the pdf - so it opens in a new tab and is a cover page with dynamic title - that page is easy as the content will never overflow. For every page i have a div (called .a4) which i use to make sure the page is the right size to be printed into pdf. For page 2 onwards i also have divs with the a4 class to constrain the size. On page 2 it is very possible that the content will overflow and be longer than the a4 size - i really cant see a good way to break this onto a new page as i have positioned header and footer images. I would need to have one div that spanned more than one page and head margin from the top and bottom of every page that it is on. Pretty sure i cannot do that. I may have to look for another solution ... but im so close to this working. Trying to avoid the wasted time. Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 looking at this right now as a potential. https://jsfiddle.net/hnxrLav8/6/ https://stackoverflow.com/questions/32333656/move-overflowed-elements-to-another-div Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 So you are NOT using html, but PHP Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 3 minutes ago, ginerjm said: So you are NOT using html, but PHP correct - sorry i should have been more clear. Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 This is the current layout. <div class="printContainer"> <div class="a4"> <div class="coverPageImage"> <img src="img/Cover Page.jpg" alt="" style='width:100%;'> <div class="coverPageContent"> <?= getCoverPageContent($pdo, $_GET['quoteId']) ?> </div> </div> </div> <div class="a4"> <div class="headerSection"> <img class="headerImage" src="img/header.png" alt=""> </div> <div class="pageContent"> <div class="title"> This is the title </div> <hr> <div class="vat"> All prices are exlusive of vat </div> <div class="mainContent"> <div class="container-fluid"> <?= getAllItemsInQuoteForPrint($pdo, $_GET['quoteId'])?> </div> </div> </div> <div class="footerSection"> <img class="footerImg" src="img/footer.png" alt=""> </div> </div> </div> Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 So all you are doing is showing a webpage and you want to print it as a pdf. If you are storing everything in a div and you use the CSS that was recommended earlier you s/b all set Quote Link to comment Share on other sites More sharing options...
Adamhumbug Posted August 25, 2023 Author Share Posted August 25, 2023 6 minutes ago, ginerjm said: So all you are doing is showing a webpage and you want to print it as a pdf. If you are storing everything in a div and you use the CSS that was recommended earlier you s/b all set Yeah thats pretty much the long and short of it. Ill have a play around with it all and see where i get to. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted August 25, 2023 Share Posted August 25, 2023 This could have been resolved about 10 posts ago if you were clearer to begin with. Oh, well... Enjoy Quote Link to comment Share on other sites More sharing options...
Solution Adamhumbug Posted August 29, 2023 Author Solution Share Posted August 29, 2023 (edited) In the end i created a script that did what i wanted. $('.section').each(function() { var $el = $(this); var bottom = $el.position().top + $el.outerHeight(true); if (bottom > 950) { $('#pageContent2').append($el) } }) It grabs any element that appears below the page end and moved it into the next page. I am very sure this is a hack and not the cleanest solution, but it does do what i need. As always, i am greatful for your feedback and pointers. Edited August 29, 2023 by Adamhumbug Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.