-1

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.

mkl
  • 90,588
  • 15
  • 125
  • 265
Reverend Bubbles
  • 1,363
  • 5
  • 15
  • 29
  • For reference, I converted it straight from the browser as well, and it looked right, except it had datetimestamps and urls on there that I don't want. – Reverend Bubbles Apr 12 '18 at 21:24
  • The problem here is you are trying to get a "page layout" result from a web layout. They don't really match. HTML to PDF conversion is often difficult because you need to specify the layout differently. The more complex your presentation the more likely you are to need a report-specific tool/library/api rather than a simple converter. – Paul Jowett Apr 23 '18 at 03:08
  • Despite disagreeing with the reasons stated for closing this question (especially the second reason - I did exactly that!), there is no need to rewrite. I already figured out the answer. – Reverend Bubbles May 23 '18 at 21:04

1 Answers1

0

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!

Reverend Bubbles
  • 1,363
  • 5
  • 15
  • 29