11

I m embeding a pdf document into my html code. For this i have wrote this code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org

/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

But result is empty page on FF4 and IE9 embeds pdf file but its container is very small almost 30% of page. if I remove first line i.e DOCTYPE both browsers renders pdf file as it should. Following code works fine.

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

I want to use doctype in my page so that other pages work fine. Is there a way to fix first code that contains doctype?

4 Answers 4

9

This is basically @tXK's answer (+1), but with working (battle tested) code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;

    height: 100%;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
</head>

<body>

<iframe src=""></iframe>

</body>
</html>
0
9

There are THREE ways to show a PDF in HTML: using embed, object, or iframe. Unfortunately using iframe will not allow the Adobe Javascript inside the PDF to post messages to the JS in HTML, because the hostContainer is undefined. Therefore I am forced to use embed or object. Fortunately thirtydot's style code also works great for object. Here is my working code...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    overflow: hidden;
}
object {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
<script language="javascript">
    function handleMessage(msg) {
      alert('got message '+msg);
    }
    function setupHandler() {
      document.getElementById("myPdf").messageHandler = { onMessage: handleMessage };
    }
</script>
</head>
<body onLoad="setupHandler();">
<object id="myPdf" type="application/pdf" data="file_with_actions.pdf">
Unable to open the PDF file.
</object>
</body>
</html>

You can read more about the Javascript stuff here.

1
  • 1
    Another discovery: if you are using SWT Browser to display a PDF, do not use setText or else the hostContainer is undefined. You must use setURL (i.e. put the text in a temp file). Commented Oct 1, 2013 at 21:13
5

I would try with an <iframe> element.
If not, maybe transforming it into flash and then embedding the flash.

Also, try <!doctype html> and see what it does, that's the standard doctype for HTML5

1
  • 2
    Upvoted 6 years later because iframe seems it is still the way to go.
    – vhs
    Commented Nov 12, 2017 at 14:29
0

I just struggled like 8 hours trying to display PDF inside an object tag. Here are some things that might prevent it from working. In my case, I'm using Play Framework as back end framework with Scala lang. Here are some general things to check if having problems displaying stuff inside <object> tag.

  1. Make sure you can view your pdf. For instance, if your endpoint that should return PDF is http://localhost:9000/report, then check it manually that it actually works.

  2. Apply correct CSP rules. object-src is important here. More useful information about CSP here.

  3. Make sure type is correct in object tag. <object data="application/pdf" .... Also worth checking that data="<url here>" is actually the typed correctly. If using dynamic link, make sure framework you are using is not blocking (possibly) dangerous URLs. In that case, URLs must be sanitized.

  4. Configure CORS rules correctly

  5. Return correct Headers in Response.

Example http response headers:

Content-Disposition: "inline; filename: report.pdf"
Content-Type: "application/pdf"
X-Frame-Options: "SAMEORIGIN"

"The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

  1. Make sure your server is not overwriting headers (see #5). In my case this was the reason, because Play Framework initially sets X-Frame-Options to "DENY". Check your server's config file(s).

  2. Make sure your tag inside html is actually visible. Not invisible or beneath some other element (see CSS z-index). Make sure it has height and width set.

  3. Make sure there are no plugins - like Ad Blockers - or some other security software blocking pdf, requests and/or embedded elements like <object> or <iframe>.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.