在移动浏览器中嵌入 PDF

Posted 2023-03-05

【中文标题】在移动浏览器中嵌入 PDF

【英文标题】：Embed PDF in mobile browsers

【发布时间】：2016-07-22 18:57:58

【问题描述】：

我有下面的代码，它是我需要的完美解决方案，它基本上可以在我的网页中嵌入任何 JPG、GIF、PNG 或 PDF 文件。它可以在 PC 浏览器中完美运行，但由于其目标用户，页面的关键要求是使其在移动浏览器中兼容。

<iframe src="uploads/test1.pdf"  > </iframe>

虽然图像文件可以正常工作，但 PDF 文件是在移动浏览器中单独打开的，而不是内嵌在网页中的。对此有什么替代解决方案或实现方式？

【参考方案1】：

您可以使用 PDFJs 库。仅使用 JS 即可呈现 pdf 文件。 请在这里查看：https://mozilla.github.io/pdf.js/

【讨论】：

一次加载一个页面...我们如何在页面的一小部分中显示整个文件？？

也偶然发现了这个，这里有没有关于嵌入整个文件的消息？

有时这不是一个选项。就我而言，使用 PDFJS 是一个瓶颈，因为它给了我跨域资源共享 (CORS) 问题，我通过使用简单的 iframe 和源解决方案解决了这个问题，但现在我不得不权衡取舍，啊！

【参考方案2】：

一个简单的选择是 object 元素提供了一个后备，所以你可以这样做：

<object data='some.pdf'>
    <p>Oops! Your browser doesn't support PDFs!</p>
    <p><a href="some.pdf">Download Instead</a></p>
</object>

然后，当移动浏览器无法获取该项目时，它只会显示这个，你就可以了，有点。

【参考方案3】：

这是我对这个问题的解决方案。

<object data="mypdf.pdf" type="application/pdf" frameborder="0"   style="padding: 20px;">
    <embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing"  /> 
</object>
     

说明：<object>标签有一个特性，当它无法加载item时，它会加载自身内部的内容，即标签。 由于对象标签无法在移动视图上加载，因此在移动设备上，embed 标签将变为活动状态。

Q) 为什么我们不能对所有情况都直接使用标签？

其实可以，但是因为嵌入标签是从 驱动器，它没有为我们看到的 pdf 提供任何用户控制 带有对象标签（缩放、页码等）。因此，我们的代码将至少在桌面模式下为用户提供 pdf 视图控件，而不是根本不提供任何控件。

Q)直接驱动链接不起作用....那么为什么要使用这个解决方案？

在上面的 google drive URL 中，view 更改为 preview。 drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/查看?usp=sharing 变成， drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing

所以，我们可以通过这个小修改使直接驱动链接工作

【参考方案4】：

使用 Adob​​e PDF Embed API 解决了我的问题。 Adobe PDF Embed API

【讨论】：

嗨，萨希尔。基于链接的答案可以是评论以获得更好的影响。

【参考方案5】：

Google 文档查看器提供了一项功能，可让您在网页上嵌入 PDF 文件和 PowerPoint 演示文稿。

<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>

将 URL(http://infolab.stanford.edu/pub/papers/google.pdf) 替换为您自己的地址，这对我有用，但加载需要更多时间

src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist

【参考方案6】：

我发现允许您嵌入 pdf 的唯一方法是使用 Google 驱动器，然后在打开文件后选择菜单按钮，然后选择获取嵌入代码，您只能使用 Google 驱动器或 Google 文档参考.并且您还必须打开公共共享，否则其他人将无法在未经许可的情况下查看它。

【参考方案7】：

我遇到了同样的问题。作为一名新开发人员，我不知道移动浏览器在 iframe 中嵌入 PDF 文件存在问题。我现在...大声笑

当我意识到移动浏览器在新窗口中显示 PNG 文件时没有问题时，我竭尽全力试图让它工作。因此，以我无限的智慧，我在 Gimp 2.0 中打开了 PDF 文件，然后将它们导出为 PNG 文件。然后我创建了供用户单击的按钮，现在它打开了图形，而不是尝试嵌入 PDF。 看起来像这样：

<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'"  />

我不知道这对你是否可行，但对我来说效果很好。

【参考方案8】：

在对象标签内使用带有 iframe 标签的对象标签。

通过更改类型，对象数据可以是 pdf 或 png 文件，并且可以使用您想要存储在任何地方的任何链接，但是 I 框架是将为手机加载的框架，它必须是来自 Google 驱动器的链接或Google 文档您还需要允许公开共享文件，否则其他人将无法查看它们。

我会分享代码，但是这个网站有一些关于代码的垃圾规则，不会让我分享它们，所以我将通过查看实际上需要开发人员帮助的更好的网站，让你 Google 对象和 iframe 标签如何工作.

玩得开心！

【讨论】：

共享代码有什么问题？你可以像这里的其他答案一样将代码嵌入到你的答案中。