Question

I try to include fragments of pdf documents in a web page. These fragments are of different sizes. I want to display them in full in actual sizes.

I am looking to program in javascript something like:

<embed src="my_document.pdf#zoom=100" width="my_document.pdf".width height="my_document.pdf".height />

I do not know how to retrieve the document size in meta-datas of my document in javascript.

I have no problem to display the pdf. This code works but the 100% is 100% of the web page not the pdf document.

Is this possible?

Answer 1

You can’t do this with javascript

Perhaps your able to get some meta-data like filesize, and file type (application/pdf) at best. ‘Unrolling’ the pdf contents to get a width/height isn’t really standard so I doubt it is even in the meta-data.

Possible solution

If your pdf documents contain text and have a layout where each page is of the same height AND you have access to the amount of pages there are in the pdf. If so you can add an attribute <embed page_type='A4' page_count='$page_count' .., which is accessable by javascript.

An A4 paper would be 842px (let’s call it paper_height), so you can do something like pdf_height = paper_height * page_count * zoom;

*Optional stuff *

I am assuming the zoom is something custom, so you can add a javascript handler on it:

$('embed').height(paper_height * zoom);

// or

$('embed').css('height', paper_height * zoom);

However you might use some pre-defined CSS classes if the zoom does not have too many states. At the start you could do <embed class='pdf_height_no_zoom' ... And if the user clicks a zoom button $('embed').attr('class', 'pdf_zoom_level2');