Html 如何在页面中嵌入 PDF 查看器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14081128/
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
How to embed a PDF viewer in a page?
提问by Andrei Oniga
If I'm not mistaken, Google Docs offers the means to display a PDF that is stored on the same server as the web page via an <iframe>, but I need to know how I can do this in a cross-browser compliant way.
如果我没记错的话，Google Docs 提供了通过<iframe>.
回答by Ian Gregory
You could consider using PDFObjectby Philip Hutchison.
您可以考虑使用Philip Hutchison 的PDFObject。
Alternatively, if you're looking for a non-Javascript solution, you could use markup like this:
或者，如果您正在寻找非 Javascript 解决方案，您可以使用如下标记：
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>
回答by mutil
PDF.jsis an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. It is community-driven and supported by Mozilla Labs.
PDF.js是一项 HTML5 技术实验，旨在探索在没有本机代码帮助的情况下构建忠实且高效的可移植文档格式 (PDF) 渲染器。它由社区驱动并得到 Mozilla Labs 的支持。
You can see the demo here.
您可以在此处查看演示。
回答by DoesEatOats
This might work a little better this way
这样做可能会好一点
<embed src= "MyHome.pdf" width= "500" height= "375">
回答by Jon
If I'm not mistaken, the OP was asking (although later accepted a .js solution) whether Google's embedded PDF display server will display a PDF on his own website.
如果我没记错的话，OP 是在问（尽管后来接受了 .js 解决方案）Google 的嵌入式 PDF 显示服务器是否会在他自己的网站上显示 PDF。
So, one and a half years later: yes, it will.
所以，一年半之后：是的，它会的。
See http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html. Also, see https://docs.google.com/viewer, and plug in the URL of the file you want to display.
请参阅http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html。另外，请参阅https://docs.google.com/viewer，并插入要显示的文件的 URL。
Edit: Re-reading, OP was asking for solutions that don't use iFrames. I don't think that's possible with Google's viewer.
编辑：重新阅读，OP 要求不使用 iFrame 的解决方案。我认为 Google 的查看器不可能做到这一点。
回答by Netorica
have a try with Flex Paperhttp://flexpaper.devaldi.com/
尝试使用Flex Paper http://flexpaper.devaldi.com/
it works like scribd
它像 scribd 一样工作
回答by Charles Belov
Be sure to test any solution across different Reader preferences. A site visitor may have their browser set to open the PDF in Reader/Acrobat as opposed to the browser, e.g., by disabling the Acrobat plugin in Firefox..
请务必在不同的阅读器首选项中测试任何解决方案。站点访问者可能会将他们的浏览器设置为在 Reader/Acrobat 中打开 PDF，而不是在浏览器中打开 PDF，例如，通过禁用 Firefox 中的 Acrobat 插件。
I can't be sure of my results, because I have two different Acrobat plugins that Firefox recognizes due to my having different versions of Adobe Acrobat and Adobe Reader, but it does appear that you at least need to test what happens if a website visitor has their browser set to not open the PDF in the browser. It could be quite annoying when they look at what appears to be an otherwise usable web page and their browser is nagging them to open a PDF file that they think they didn't request. In some cases, the PDF file spontaneously opened in Adobe Reader, not the browser, and in other cases the browser threw up a dialog saying the file didn't exist.
我不能确定我的结果，因为我有两个不同的 Acrobat 插件，Firefox 可以识别，因为我有不同版本的 Adobe Acrobat 和 Adobe Reader，但看起来你至少需要测试一下如果网站访问者会发生什么将浏览器设置为不在浏览器中打开 PDF。当他们查看看似可用的网页并且他们的浏览器催促他们打开他们认为他们没有请求的 PDF 文件时，这可能会很烦人。在某些情况下，PDF 文件会在 Adobe Reader 中自动打开，而不是在浏览器中打开，而在其他情况下，浏览器会弹出一个对话框，说该文件不存在。
I ran into such mismatches with iframe and object both, different issues for different code.
我遇到了 iframe 和 object 的不匹配，不同代码的不同问题。
This is for simple HTML code. I haven't tried the suggested frameworks.
这是用于简单的 HTML 代码。我还没有尝试过建议的框架。
回答by Robby
I would really opt for FlowPaper, especially their new Elements mode that can be found here : https://flowpaper.com/demo/
我真的会选择 FlowPaper，尤其是他们的新元素模式，可以在这里找到：https://flowpaper.com/demo/
It flattens the PDFs significantly at the same time as keeping text sharp which means that it will load much faster on mobile devices
它在保持文本清晰的同时显着展平了 PDF，这意味着它在移动设备上的加载速度要快得多
回答by Sina Riyazi
using bootstrap you can have a responsive and mobile first embeded file.
使用引导程序，您可以拥有响应式且移动优先的嵌入文件。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>
Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
回答by Dreizeiler
pdf2htmlEX by coolwanglu is probably the best solution out there to convert a pdf file into html. You could do a simple convert and then embed the html page as an iframe or something similar.
coolwanglu 的 pdf2htmlEX 可能是将 pdf 文件转换为 html 的最佳解决方案。你可以做一个简单的转换，然后将 html 页面嵌入为 iframe 或类似的东西。
