使用object标签在PDF中嵌入PDF文件

mys*_*ous 9 html embed pdf

我将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&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>
Run Code Online (Sandbox Code Playgroud)

但结果是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&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>
Run Code Online (Sandbox Code Playgroud)

我想在我的页面中使用doctype,以便其他页面正常工作.有没有办法修复包含doctype的第一个代码?

thi*_*dot 9

这基本上是@ 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>
Run Code Online (Sandbox Code Playgroud)


Joh*_*kel 6

有三种方法可以在HTML中显示PDF:使用embed,object或iframe.不幸的是,使用iframe不允许PDF中的Adobe Javascript 以HTML 格式向JS发布消息,因为hostContainer未定义.因此我被迫使用嵌入或对象.幸运的是,thirtydot的样式代码也适用于对象.这是我的工作代码......

<!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>
Run Code Online (Sandbox Code Playgroud)

您可以在这里阅读有关Javascript内容的更多信息.


tXK*_*tXK 5

我会尝试一个<iframe>元素.
如果没有,可能将其转换为闪存,然后嵌入闪存.

另外,试着<!doctype html>看看它做了什么,这是HTML5的标准doctype

  • 6年后上涨,因为`iframe`似乎仍然是要走的路. (2认同)