使用对象标记在html中嵌入PDF文件

fbcarpbf 于 2023-11-15 发布在其他

关注(0)|答案(4)|浏览(129)

我正在把一个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>

字符串
但结果是空的页面上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>

型
我想在我的页面中使用doctype，这样其他页面就可以正常工作了。有没有办法修复包含doctype的第一个代码？

Html

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

4条答案

按热度按时间

9cbw7uwe1#

这基本上是@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>

字符串

赞(0）回复(0）举报 2023-11-15

wswtfjt72#

有三种方法来显示一个PDF在HTML：使用嵌入，对象，或iframe.不幸的是，使用iframe将不允许Adobe JavaScript * 内的PDF* 张贴消息到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>

字符串
你可以阅读更多关于JavaScript的东西here。

赞(0）回复(0）举报 2023-11-15

vom3gejh3#

我会尝试使用<iframe>元素。
如果没有，也许把它变成闪光灯，然后嵌入闪光灯。
另外，试试<!doctype html>，看看它能做什么，这是HTML5的标准doctype

赞(0）回复(0）举报 2023-11-15

j1dl9f464#

我刚刚挣扎了8个小时试图在对象标签中显示PDF。这里有一些事情可能会阻止它工作。在我的情况下，我使用Play Framework作为Scala lang的后端框架。这里有一些常规的事情来检查是否有问题显示<object>标签中的东西。
1.确保您可以查看您的PDF。例如，如果您应该返回PDF的端点是http://localhost:9000/report，则手动检查它是否实际工作。
1.应用正确的CSP rules. object-src在这里很重要。关于CSP here的更多有用信息。
1.确保type在object tag. <object data="application/pdf" ...中是正确的。还值得检查data="<url here>"实际上是正确输入的。如果使用动态链接，请确保您使用的框架没有阻止（可能）危险的URL。在这种情况下，URL必须进行 * 消毒 *。
1.正确配置CORS规则
1.在响应中返回正确的标题。
HTTP响应头示例：

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

字符串
“X-Frame-Options HTTP响应标头可用于指示是否应允许浏览器以<frame>、<iframe>、<embed>或<object>呈现页面
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options的
1.确保你的服务器没有恶意的头文件（见#5）。在我的情况下，这就是原因，因为Play Framework initially sets X-Frame-Options to "DENY"。检查你的服务器的配置文件。
1.确保你的标签在html中是可见的。不是不可见的或者在其他元素下面（见CSS z-index）。确保它有高度和宽度设置。
1.确保没有插件-如广告拦截器-或其他一些安全软件阻止pdf，请求和/或嵌入式元素，如<object>或<iframe>。

赞(0）回复(0）举报 2023-11-15

我来回答

使用对象标记在html中嵌入PDF文件

4条答案

相关问题

热门标签

最新问答