我将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>
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&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>
Run Code Online (Sandbox Code Playgroud)
我想在我的页面中使用doctype,以便其他页面正常工作.有没有办法修复包含doctype的第一个代码?
这基本上是@ 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)
有三种方法可以在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内容的更多信息.
我会尝试一个<iframe>元素.
如果没有,可能将其转换为闪存,然后嵌入闪存.
另外,试着<!doctype html>看看它做了什么,这是HTML5的标准doctype