Break a document onto another page

[Adamhumbug]

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.

[ginerjm]

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

[requinix]

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.

[Adamhumbug]

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.

[Adamhumbug]

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.

[ginerjm]

HTML does not print well on paper.  

[Adamhumbug]

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.

[Adamhumbug]

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.

[ginerjm]

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?

[requinix]

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.

[ginerjm]

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

[Adamhumbug]

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.

[Adamhumbug]

looking at this right now as a potential.

https://jsfiddle.net/hnxrLav8/6/

https://stackoverflow.com/questions/32333656/move-overflowed-elements-to-another-div

[ginerjm]

So you are NOT using html, but PHP

[Adamhumbug]

3 minutes ago, ginerjm said:

So you are NOT using html, but PHP

correct - sorry i should have been more clear.

[Adamhumbug]

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>

 

[ginerjm]

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

[Adamhumbug]

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.

[ginerjm]

This could have been resolved about 10 posts ago if you were clearer to begin with.   Oh, well...

Enjoy

[Adamhumbug]

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