CODEWITHSUNDEEP
javascripthtmlcsspdfprinting
Dave Sanders
Dave Sanders

Reputation: 3193

Print Preview CSS, but in browser

TLDR; I need to be able to show the print CSS live in the browser, without using dev tools.

This is kind of a weird one, but I'm grasping at straws.

Without trying to explain the whole system - I have a mechanism for web based editing of text that then gets put into a template, then rendered in a PDF via a HTML2PDF operation. I have requirements like static headers / footers on each page, but text flowing between pages, etc.

I need to be able to let the user see a live (or near live) preview of how their output is going to look when its a PDF, but I DON'T want to just keep rerendering the PDF on each change. I would really like to be able to show them the "print preview" that uses a print CSS, but within my main browser window or an iframe, not via the usual print preview, and not using the web tools from chrome / firefox.

Is there anyway to tell the browser to render with the print CSS? Or is there perhaps a JS library I can't find that would simulate that?

Upvotes: 2

Views: 867

Answers (1)

Nick Larsen
Nick Larsen

Reputation: 18877

I built something similar to what you describe for the apply with your Careers Profile feature here on Stack Overflow jobs. It's a much more difficult task than applying some css to some html.

I'm assuming this pdf is possibly multiple pages and you want to display individual pages like the print preview feature of basically every print preview.

Whatever HTML2PDF converter you are using will define a page height and width in pixels (although you might have to experiment to figure out what that is) and generally you can find the page padding in pixels as well. Using this you can create a single page wrapper in your html with some css to match the padding and make a nice page border however you like.

<div class="pdf-page"></div>

Dump all the contents of the html that you want in the pdf in there.

Now what you need to do is figure out how large the actual content of the PDF is in pixels. The easiest way to do this is to actually drop it in a container in the browser, then use some javascript to calculate the height of the container. It's possible to do this without actually showing it on the screen, but remember here that your calculated value is based on the current browser's graphics engine, not necessarily the one used by your HTML2PDF converter so results might vary. If you run into consistent issues, you can probably resolve them by adding a little padding to your per page calculations in the browser, but that's beyond the scope of this.

Once you have a single page and the height of the total document, you can figure out how many pages you need, and you copy the entire pdf-page from above with all the html content that many times into your preview page. Then for each page you set a negative margin to scroll the content up. On the first page it's -0, on the second page it's -1 * pageHeightInPixels, third page is -2 * pageHeightInPixels and so on. If your documents are short this works great, if they are excessively long, this will likely fail.

Now you can style it up however you like.

When I did this, it was like 7 years ago, haven't look up any newer ways of accomplishing it, but we have since changed how we do pdf previews to actually generate real pdfs.

Upvotes: 3

Related Questions