Search code examples
pdfpdf-generationfoxit

converting an HTML page to a PDF

Conceptually, this is simple.

I have an HTML page. I want it in PDF form. I pull up Foxit's PhantomPDF and convert the file.

Problems:

  1. It goes too wide and gets its sides shaved off (mainly on the right)
  2. It doesn't know what it's reading, so I have page breaks literally cutting words in half horizontally.

How do I successfully convert an HTML page to a PDF and avoid these issues?

Thanks.

Solution

  • So the answer to this ended up being a combination of a few things.

    1) I had to edit the CSS to make sure images were actually staying within the bounds of the "100%" of the page. I added CSS to make sure all images maxed out at 90%. This prevented any side-to-side scrolling on the page and prevented anything getting cut off in the PDF.

    2) I went into the Page Setup section off of the File menu in the browser, went to the "Margins and Footers" tab and there were the places that were inscribing things like date/url/page number. I blanked all those out and all was good.

    3) The trickiest part was making sure it split pages in the correct places. I finally learned about the CSS properties called page-break-before and page-break-inside. I created classes with each of these set like so:

    // Creates a page break in the PDF right before element with this class
.pagebreak{
    page-break-before: always;    
}

// Doesn't allow the contents of a div with this class to split across pages.
.nobreak{
    page-break-inside: avoid;    
}

    and, when converted to PDF, it read these and laid out the pages as I wanted. It was a bit tedious, but I ended up with the exact PDF that I wanted!