我有下面的代码，它是我需要的完美解决方案，它基本上可以在我的网页中嵌入任何 JPG、GIF、PNG 或 PDF 文件。它可以在 PC 浏览器中完美运行，但由于其目标用户，页面的关键要求是使其在移动浏览器中兼容。
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
虽然图像文件可以正常工作，但 PDF 文件是在移动浏览器中单独打开的，而不是内嵌在网页中的。对此有什么替代解决方案或实现方式？
【问题讨论】：
标签： html pdf iframe mobile embed
您可以使用 PDFJs 库。仅使用 JS 即可呈现 pdf 文件。 请在这里查看：https://mozilla.github.io/pdf.js/
【讨论】：
一个简单的选择是 object 元素提供了一个后备，所以你可以这样做：
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p><a href="some.pdf">Download Instead</a></p>
</object>
然后，当移动浏览器无法获取该项目时，它只会显示这个，你就可以了，有点。
【讨论】：
这是我对这个问题的解决方案。
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</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
所以，我们可以通过这个小修改使直接驱动链接工作
【讨论】：
使用 Adobe PDF Embed API 解决了我的问题。 Adobe PDF Embed API
【讨论】：
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) 替换为您自己的地址，这对我有用，但加载需要更多时间
【讨论】：
我发现允许您嵌入 pdf 的唯一方法是使用 Google 驱动器，然后在打开文件后选择菜单按钮，然后选择获取嵌入代码，您只能使用 Google 驱动器或 Google 文档参考.并且您还必须打开公共共享，否则其他人将无法在未经许可的情况下查看它。
【讨论】：
我遇到了同样的问题。作为一名新开发人员，我不知道移动浏览器在 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'" />
我不知道这对你是否可行，但对我来说效果很好。
【讨论】：
在对象标签内使用带有 iframe 标签的对象标签。
通过更改类型，对象数据可以是 pdf 或 png 文件，并且可以使用您想要存储在任何地方的任何链接，但是 I 框架是将为手机加载的框架，它必须是来自 Google 驱动器的链接或Google 文档您还需要允许公开共享文件，否则其他人将无法查看它们。
我会分享代码，但是这个网站有一些关于代码的垃圾规则，不会让我分享它们，所以我将通过查看实际上需要开发人员帮助的更好的网站，让你 Google 对象和 iframe 标签如何工作.
玩得开心！
【讨论】：