javascript - How to fit PDF file horizontally in an iframe? - Stack Overflow

I've been struggling to make pdf fit horizontally dynamically .pdf#toolbar=0&navpanes=0&scrollbar=0&view=FitH

But it does not work in firefox.

You can see demo here though this demo works properly. /

I've been struggling to make pdf fit horizontally dynamically https://www.modelica/events/modelica2011/authors-guide/example-abstract.pdf#toolbar=0&navpanes=0&scrollbar=0&view=FitH

But it does not work in firefox.

You can see demo here though this demo works properly. http://jsfiddle/raanx/1/

• javascript
• jquery
• html
• pdf
• iframe

Share Improve this question Follow asked Mar 28, 2012 at 13:38 codef0rmercodef0rmer 10.5k99 gold badges5454 silver badges7878 bronze badges 5

• The jsfiddle does not work "properly" for me; it prompts me for a download. (I'm running Firefox.) – Pointy Commented Mar 28, 2012 at 13:40
• may be you do not have acrobate reader or any other pdf reader installed on your system. – codef0rmer Commented Mar 28, 2012 at 13:47
• I do have readers installed; I don't have a browser plugin however. – Pointy Commented Mar 28, 2012 at 13:58
• I have a solution in php, and am converting it to javascript for you. – Cymbals Commented Mar 28, 2012 at 15:12
• Do you need a solution that negates a pdf reader being installed? – Cymbals Commented Mar 28, 2012 at 15:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

1) embed is old and should not be used anymore to get consistent results.

2) There are multiple ways of going about it (ajax grabbing the file and then rendering it, for example), however, I would eliminate the quirks of involving the browser dependency on a plugin.

To do this 'properly', I would check out https://github./andreasgal/pdf.js#readme and look at rendering a pdf in javascript alone. It eliminates the need for a reader installed on the puter, and is the way things will move toward.

3) To handle the horizontal fit, I found that css gave me problems with iframes / pdf bos in a few browsers as of today, and resorted to using old-school width and height as follows. Quirky, but it works in firefox, chrome, IE9, safari, so please do not neg me for browser quirks. Otherwise I would just use css.

<iframe name="myiframe" id="myiframe"  width="100%" height="600" src="viewpdf.php"></iframe>

Although not JavaScript, here is some php code that demonstrates how I do it:

viewpdf.php:

header('Content-Type: application/pdf'); 
header('Accept-Ranges: none');  
header('Content-Disposition: inline; filename="' . $finalpdf_fn . '"'); 
header('Content-Transfer-Encoding: binary');
header('Cache-Control: no-store, must-revalidate, post-check=0, pre-check=0', true);

@readfile($finalpdf_fn);

So...in JavaScript, it would look something like:

function getXMLHttp() {
  var xmlHttp;
  try {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch(e) {
    //Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  return xmlHttp;
}        
var oRequest = getXMLHttp();
var sURL = "/tmp/pdf-13319JPL3j7.pdf"; 
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("Content-Type","application/pdf");
oRequest.setRequestHeader("Accept-Ranges","none");
oRequest.setRequestHeader("Content-Disposition","inline; filename='"+sURL+"'");
oRequest.setRequestHeader("Content-Transfer-Encoding","binary");
oRequest.setRequestHeader("Cache-Control","no-store, must-revalidate, post-check=0, pre-check=0', true");
oRequest.onreadystatechange = function() {
    if( oRequest.readyState == 4 ) {
        if (oRequest.status==200) { 
            document.write (oRequest.responseText);
        }
    }
}
oRequest.send(null)
</script>

well, there is no way to resolve such browser specific bugs. The pdf viewer works differently in different browser. I would suggest you to go with Javascript PDF viewers available.