embed PDF file in html using object tag

问题

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?

回答1:

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

回答2:

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>

回答3:

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.

来源：https://stackoverflow.com/questions/6185774/embed-pdf-file-in-html-using-object-tag

标签

html

pdf

embed