使用对象标签在 html 中嵌入 PDF 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6185774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
embed PDF file in html using object tag
提问by mysterious
I m embeding a pdf document into my html code. For this i have wrote this code.
我正在将 pdf 文档嵌入到我的 html 代码中。为此，我编写了这段代码。
<!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&navpanes=0&scrollbar=1&page=1&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.
但结果是 FF4 上的空白页面和 IE9 嵌入了 pdf 文件，但其容器非常小，几乎占页面的 30%。如果我删除第一行，即 DOCTYPE，两个浏览器都会按原样呈现 pdf 文件。以下代码工作正常。
<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&navpanes=0&scrollbar=1&page=1&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?
我想在我的页面中使用 doctype，以便其他页面正常工作。有没有办法修复包含 doctype 的第一个代码？
采纳答案by tXK
I would try with an <iframe>element.
If not, maybe transforming it into flash and then embedding the flash.
我会尝试使用一个<iframe>元素。
如果没有，也许将其转换为闪存，然后嵌入闪存。
Also, try <!doctype html>and see what it does, that's the standard doctype for HTML5
另外，尝试<!doctype html>看看它的作用，这是 HTML5 的标准文档类型
回答by thirtydot
This is basically @tXK's answer (+1), but with working (battle tested) code:
这基本上是@tXK 的答案 (+1)，但使用了有效的（经过实战测试的）代码：
<!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>
回答by John Henckel
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 PDFto 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...
在 HTML 中显示 PDF 有三种方式：使用嵌入、对象或 iframe。不幸的是，使用 iframe 将不允许PDF 中的 Adobe Javascript以 HTML格式向 JS 发布消息，因为 hostContainer 未定义。因此我被迫使用嵌入或对象。幸运的是，twentydot的样式代码也适用于对象。这是我的工作代码...
<!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.
您可以在此处阅读有关 Javascript 内容的更多信息。
