如果我没记错的话,Google Docs 提供了一种显示 PDF 的方法,该 PDF 通过<iframe>
.
10 回答
您可以考虑使用Philip Hutchison 的PDFObject。
或者,如果您正在寻找非 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>
这样可能会更好一些
<embed src= "MyHome.pdf" width= "500" height= "375">
如果我没记错的话,OP 是在询问(尽管后来接受了 .js 解决方案)Google 的嵌入式 PDF 显示服务器是否会在他自己的网站上显示 PDF。
所以,一年半后:是的,它会的。
请参阅http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html。此外,请参阅https://docs.google.com/viewer,并插入您要显示的文件的 URL。
编辑:重新阅读,OP 要求不使用 iFrames 的解决方案。我认为 Google 的查看器不可能做到这一点。
试试Flex Paper http://flexpaper.devaldi.com/
它像 scribd 一样工作
请务必跨不同的阅读器偏好测试任何解决方案。站点访问者可能将其浏览器设置为在 Reader/Acrobat 中打开 PDF,而不是在浏览器中打开,例如,通过禁用 Firefox 中的 Acrobat 插件。
我不能确定我的结果,因为我有两个不同的 Acrobat 插件,Firefox 可以识别它们,因为我有不同版本的 Adobe Acrobat 和 Adobe Reader,但看起来你至少需要测试如果网站访问者会发生什么将他们的浏览器设置为不在浏览器中打开 PDF。当他们查看看似可用的网页并且他们的浏览器正在唠叨他们打开他们认为他们没有请求的 PDF 文件时,这可能会很烦人。在某些情况下,PDF 文件会在 Adobe Reader 而不是浏览器中自动打开,而在其他情况下,浏览器会弹出一个对话框,提示该文件不存在。
我遇到了与 iframe 和对象的不匹配,不同代码的不同问题。
这适用于简单的 HTML 代码。我还没有尝试过建议的框架。
使用引导程序,您可以拥有一个响应式和移动优先的嵌入文件。
<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>
coolwanglu 的 pdf2htmlEX 可能是将 pdf 文件转换为 html 的最佳解决方案。您可以进行简单的转换,然后将 html 页面嵌入为 iframe 或类似的东西。
我真的会选择 FlowPaper,尤其是他们的新元素模式,可以在这里找到: https ://flowpaper.com/demo/
它在保持文本清晰的同时显着扁平化 PDF,这意味着它将在移动设备上加载得更快
<iframe src="https://docs.google.com/viewer?url=**https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf**&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>
应将 URL https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf替换为您自己的地址