CODEWITHSUNDEEP
javascriptjqueryhtmlpdfiframe
codef0rmer
codef0rmer

Reputation: 10520

How to fit PDF file horizontally in an iframe?

I've been struggling to make pdf fit horizontally dynamically https://www.modelica.org/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.net/raanx/1/

Upvotes: 2

Views: 4868

Answers (2)

Cymbals
Cymbals

Reputation: 1174

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.com/andreasgal/pdf.js#readme and look at rendering a pdf in javascript alone. It eliminates the need for a reader installed on the computer, and is the way things will move toward.

3) To handle the horizontal fit, I found that css gave me problems with iframes / pdf combos 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>

Upvotes: 4

user1306319
user1306319

Reputation:

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.

Upvotes: 2

Related Questions