Html 在 div 中显示 Adobe pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2740297/
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
Display Adobe pdf inside a div
提问by Phillip Senn
I have a pdf file that the user has to see and click on the "I agree" button. How do you display a pdf inside a div?
我有一个 pdf 文件，用户必须查看并单击“我同意”按钮。如何在 div 中显示 pdf？
回答by Ron Knee
Yes you can.
是的你可以。
See the code from the following thread from 2007: PDF within a DIV
请参阅 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>
It uses <object>, which can be styled with CSS, and so you can float them, give them borders, etc.
它使用<object>, 可以使用 CSS 设置样式，因此您可以浮动它们，给它们设置边框等。
(In the end, I edited my pdf files to remove large borders and converted them to jpg images.)
（最后，我编辑了我的 pdf 文件以去除大边框并将它们转换为 jpg 图像。）
回答by Sudhir
Here is another way to display PDF inside Div by using Iframe like below.
这是使用 Iframe 在 Div 中显示 PDF 的另一种方法，如下所示。
<div>
<iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
<!-- I agree button -->
</div>回答by Jason Watts
We use this on our website
我们在我们的网站上使用它
Its a very customizable to display PDF's directly in your browser. It basically hosts the PDF in a flash object if you are not opposed to that sort of thing.
它非常可定制，可以直接在浏览器中显示 PDF。如果您不反对那种事情，它基本上将 PDF 托管在 Flash 对象中。
Here is a samplefrom our corporate website.
这是我们公司网站上的示例。
回答by Useful Angle
You can use the Javascript library PDF.JS to display a PDF inside a div. The size of the PDF can be adjusted according to the size of the div. You can also setup event handlers for moving to next / previous pages of the PDF.
您可以使用 Javascript 库 PDF.JS 在 div 中显示 PDF。可以根据div的大小调整PDF的大小。您还可以设置事件处理程序以移动到 PDF 的下一页/上一页。
You can checkout PDF.JS Tutorial - How to display a PDF with Javascriptto see how PDF.JS can be integrated in your HTML code.
您可以查看 PDF.JS 教程 - 如何使用 Javascript 显示 PDF以了解如何将 PDF.JS 集成到您的 HTML 代码中。
回答by vishwas kadam
I think its not working, because you z-index property not applied on pdf(any outside object). So when you add any control in PDF view boundary,its appear behind of pdf view.
我认为它不起作用，因为您的 z-index 属性未应用于 pdf（任何外部对象）。因此，当您在 PDF 视图边界中添加任何控件时，它会出现在 pdf 视图的后面。
回答by Bala R
You could create an image thumbnail, and link it to the actual pdf as an inline popup using something like http://orangoo.com/labs/GreyBox/
您可以创建一个图像缩略图，并使用类似http://orangoo.com/labs/GreyBox/ 的内容将其链接到实际的 pdf 作为内联弹出窗口
回答by Nitz
may be you can do by using AJAX or jquery...
just send that file url on one page and then open like normally open pdf file in that page and use ajax.
可能你可以通过使用 AJAX 或 jquery 来做......
只需在一页上发送该文件 url，然后在该页面中像通常打开的 pdf 文件一样打开并使用 ajax。
1)so as soon as user will click on the button. then u call that function in which u above tast. So by this way there will be only one page and by that you can show as many pdf without refreshing page.
1）所以只要用户点击按钮。然后你调用你上面的那个函数。因此，通过这种方式，将只有一页，这样您就可以在不刷新页面的情况下显示尽可能多的 pdf。
2) if u don't have many pdf and if u don't know then just upload that file on google docsand then just put the share link file....and then just use ajax or jquery.
2）如果你没有很多pdf，如果你不知道，那么只需将该文件上传到谷歌文档，然后将共享链接文件....然后只需使用ajax或jquery。
i prefer jquery if u don't have use AJAX.
如果你没有使用 AJAX，我更喜欢 jquery。
回答by Nitz
You cannot, and here is the simple answer.
你不能，这是一个简单的答案。
Every media asset poured into the browser is identified by a mime type name. A browser then makes processing determinations upon that mime type name. If it is image/gif or image/jpeg the browser processes the asset as an image. If it is text/css or text/javascript it is processed as a code asset unless the asset is addressed independent of HTML. PDF is identified as application/pdf. When browsers see application/pdf they immediately switch processing to a plugin software capable of processing that media type. If you attempt to push media of type application/pdf into a div the browser will likely throw an error to the user. Typically files of type application/pdf are linked to directly so that the processing software an intercept the request and process the media independent of the browser.
流入浏览器的每个媒体资产都由一个 MIME 类型名称标识。浏览器然后根据该 MIME 类型名称进行处理确定。如果是 image/gif 或 image/jpeg，浏览器会将资产作为图像处理。如果是 text/css 或 text/javascript，则将其作为代码资产进行处理，除非该资产是独立于 HTML 寻址的。PDF 被标识为 application/pdf。当浏览器看到 application/pdf 时，它们会立即将处理切换到能够处理该媒体类型的插件软件。如果您尝试将 application/pdf 类型的媒体推送到 div 中，浏览器可能会向用户抛出错误。通常，应用程序/pdf 类型的文件被直接链接，以便处理软件拦截请求并独立于浏览器处理媒体。
回答by Diodeus - James MacFarlane
I don't think you can. You may need to use an Iframe instead.
我不认为你可以。您可能需要改用 Iframe。
