Print CSS with pdf included in page

Question

I have a page where I have a lot of info about an item, with a little "Download specs pdf" button below. Clicking it opens the pdf seperately, which is all I need for the webversion.

However I'm currently working on my print css, and my goal is to create a print css here that shows the info along with the pdf below it, included in the same printfile.

Is it possible to embed the pdf in my page (only for print css)? I've tried using the <object> or embed tags but this doesn't seem to show up at all in my print css.

Update: I managed to show the pdf using iframe, but I'm unable to set the iframe height to the pdf's height. The pdf is dynamic so it's not a set height. Dynamically updating the height through jQuery has proven to be impossible because the onload event isn't fired for file downloads in an iframe. If anyone can help me come to a solution, I would be very grateful.

Thanks in advance.

Answer 1

The simple solution is to force a 4:3 perspective on the iframe and size it according to your print page (A4 paper size is standard here).

Answer 2

I'm thinking your best bet is to have a parsed version of the PDF for printing. Open it in Illustrator and save each page to SVG and use the SVG files to print with.

Answer 3

You can use PDF.js library's who is an amaZing JavaScript PDF viewer working cross browser. Display the PDF in a div, make it hidden with a display:none for web version with your screen CSS.

Answer 4

One advice I can give you is, if you know the maximum number of PDF pages, just make the iframe height large enough... that means, if the number of pages is less, the printer is going to output empty pages.

The other advice was the one stated above, get a tool to annotate or change properties of all PDFs to contain that information.

I found this tool: http://pdfcrowd.com/html-to-pdf-api/ to convert PDF into HTML, which you can use instead of displaying PDF