Jump to content

Break a document onto another page


Adamhumbug
Go to solution Solved by Adamhumbug,

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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 by Adamhumbug
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.