50

我有一个用户必须查看的 pdf 文件，然后单击“我同意”按钮。如何在 div 中显示 pdf？

4

9 回答 9

87

是的你可以。

请参阅 2007 年以下线程中的代码： DIV 中的 PDF

<div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
        alt : <a href="test.pdf">test.pdf</a>
    </object>
</div>

它使用<object>，可以使用 CSS 设置样式，因此您可以浮动它们，给它们边框等。

（最后，我编辑了我的 pdf 文件以删除大边框并将它们转换为 jpg 图像。）

于 2010-07-04T12:10:29.723 回答
16

这是另一种使用 Iframe 在 Div 中显示 PDF 的方法，如下所示。

<div>
  <iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
  <!-- I agree button -->
</div>

于 2018-09-10T15:43:21.590 回答
2

我们在我们的网站上使用它

http://issuu.com/smartlook

直接在浏览器中显示 PDF 是一种非常可定制的方式。如果您不反对这种事情，它基本上将 PDF 托管在 flash 对象中。

这是我们公司网站的样本。

于 2010-04-29T19:51:55.917 回答
2

您可以使用 Javascript 库 PDF.JS 在 div 中显示 PDF。PDF的大小可以根据div的大小进行调整。您还可以设置事件处理程序以移动到 PDF 的下一页/上一页。

您可以查看 PDF.JS 教程 - 如何使用 Javascript 显示 PDF以了解如何将 PDF.JS 集成到您的 HTML 代码中。

于 2017-05-31T05:48:40.723 回答
1

我认为它不起作用，因为您的 z-index 属性未应用于 pdf（任何外部对象）。因此，当您在 PDF 视图边界中添加任何控件时，它会出现在 pdf 视图的后面。

于 2016-07-14T05:13:36.587 回答
-1

您可以创建一个图像缩略图，并使用类似 http://orangoo.com/labs/GreyBox/的方式将其链接到实际的 pdf 作为内联弹出窗口

于 2010-04-29T19:58:03.923 回答
-1

可能你可以通过使用 AJAX 或 jquery 来做......
只需在一个页面上发送该文件 url，然后像在该页面中正常打开的 pdf 文件一样打开并使用 ajax。

1）所以只要用户点击按钮。然后你调用那个你最喜欢的函数。因此，通过这种方式，只有一页，您可以在不刷新页面的情况下显示尽可能多的 pdf。

2）如果你没有很多pdf，如果你不知道，那么只需将该文件上传到谷歌文档上 ，然后只需放置共享链接文件......然后只需使用ajax或jquery。

如果你没有使用 AJAX，我更喜欢 jquery。

于 2010-04-29T21:37:25.603 回答
-3

你不能，这是简单的答案。

注入浏览器的每个媒体资产都由 mime 类型名称标识。然后，浏览器根据该 MIME 类型名称进行处理确定。如果是 image/gif 或 image/jpeg，浏览器会将资源作为图像处理。如果是 text/css 或 text/javascript，则将其作为代码资产处理，除非该资产的寻址独立于 HTML。PDF 被标识为 application/pdf。当浏览器看到 application/pdf 时，它们会立即将处理切换到能够处理该媒体类型的插件软件。如果您尝试将 application/pdf 类型的媒体推送到 div 中，浏览器可能会向用户抛出错误。通常应用程序/pdf 类型的文件直接链接到，以便处理软件拦截请求并独立于浏览器处理媒体。

于 2010-04-29T21:13:33.003 回答
-4

我不认为你可以。您可能需要改用 iframe。

于 2010-04-29T19:50:30.443 回答