Rendering Pdf In In Chrome As Iframe

I am trying to host pdf's in a hidden iframe and have issues with them rendering small in chrome. I have to refresh the page so that they load correctly. JSfiddle Here https://jsf

Solution 1:

@Bob R, if I understood you correctly, you want to display the pdf content with some zoom. Let's commence:

1. Fiddle example

You didn't specify the JQuery library as a dependency. That's why your fiddle didn't work.

Because Fiddle is served as https and your url is not, the browser doesn't display the pdf content. If you check the console log, there will be a message like this: This request has been blocked; the content must be served over HTTPS.

2. Opening document with zoom in

Change this:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf" width="100%" style="height:66em"></iframe>

to this:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf#page=1&zoom=150" width="100%" style="height:66em"></iframe>

If you look closely, you'll notice that I've appended to the url the "#page=1&zoom=100" fragment. That makes the pdf content to be displayed zoomed in.

Solution 2:

You could look at using a library like PDF.js to serve the pdf. This way it will be compatible with more browsers, and you won't need to worry about having to force a browser refresh to display the document

(FYI I'm on Chrome 51 and your fiddle doesn't load for me)