如何在页面中嵌入 PDF 查看器？

Posted 2023-02-24

【中文标题】如何在页面中嵌入 PDF 查看器？

【英文标题】：How to embed a PDF viewer in a page?

【发布时间】：2012-12-14 09:42:41

【问题描述】：

如果我没记错的话，Google Docs 提供了通过<iframe> 显示与网页存储在同一服务器上的 PDF 的方法，但我需要知道如何在交叉中执行此操作浏览器兼容的方式。

【参考方案1】：

试试 Flex Paper http://flexpaper.devaldi.com/

它像 scribd 一样工作

【参考方案2】：

您可以考虑使用 Philip Hutchison 的 PDFObject。

或者，如果您正在寻找非 javascript 解决方案，您可以使用如下标记：

<object data="myfile.pdf" type="application/pdf"  >
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

【讨论】：

自 2012 年以来可能发生了一些变化，但如果我使用这种方法，Chrome 会自动下载 PDF 并在外部浏览器中打开。

【参考方案3】：

PDF.js 是一项 html5 技术实验，旨在探索在没有本机代码帮助的情况下构建忠实高效的可移植文档格式 (PDF) 渲染器。它由社区驱动并得到 Mozilla 实验室的支持。

你可以看演示here。

【讨论】：

教程在哪里？

@RohanDevaki，哪个教程？这是一个演练：mozilla.github.io/pdf.js/examples

【参考方案4】：

请务必针对不同的阅读器偏好测试任何解决方案。网站访问者可能会将其浏览器设置为在 Reader/Acrobat 中打开 PDF，而不是在浏览器中打开，例如，通过禁用 Firefox 中的 Acrobat 插件。

我不能确定我的结果，因为我拥有不同版本的 Adob​​e Acrobat 和 Adob​​e Reader，因此我有两个不同的 Acrobat 插件，Firefox 可以识别它们，但看起来你至少需要测试如果网站访问者的浏览器设置为不在浏览器中打开 PDF。当他们查看看似可用的网页并且他们的浏览器正在唠叨他们打开他们认为他们没有请求的 PDF 文件时，这可能会很烦人。在某些情况下，PDF 文件会在 Adob​​e Reader 而不是浏览器中自动打开，而在其他情况下，浏览器会弹出一个对话框，提示该文件不存在。

我遇到了与 iframe 和对象的不匹配，不同代码的不同问题。

这适用于简单的 HTML 代码。我还没有尝试过建议的框架。

【参考方案5】：

如果我没记错的话，OP 是在询问（尽管后来接受了 .js 解决方案）Google 的嵌入式 PDF 显示服务器是否会在他自己的网站上显示 PDF。

所以，一年半后：是的，它会的。

见http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html。另外，请参阅https://docs.google.com/viewer，并插入您要显示的文件的 URL。

编辑：重新阅读，OP 要求不使用 iFrame 的解决方案。我认为 Google 的查看器不可能做到这一点。

【参考方案6】：

coolwanglu 的 pdf2htmlEX 可能是将 pdf 文件转换为 html 的最佳解决方案。您可以进行简单的转换，然后将 html 页面嵌入为 iframe 或类似的东西。

【参考方案7】：

这样可能会更好一些

<embed src= "MyHome.pdf" width= "500" height= "375">

【讨论】：

这对我有用。但我还必须添加属性type="application/pdf"。

这对我有用 type="application/pdf"

显示输出

【参考方案8】：

我真的会选择 FlowPaper，尤其是他们的新元素模式，可以在这里找到： https://flowpaper.com/demo/

它在保持文本清晰的同时显着扁平化 PDF，这意味着它在移动设备上的加载速度会更快

【讨论】：

教程在哪里？

【参考方案9】：

使用引导程序，您可以获得响应式和移动优先的嵌入文件。

<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>

【参考方案10】：

<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>

应将网址 https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf 替换为您自己的地址