Question

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

<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>

尽管图像文件工作正常，但PDF文件在移动浏览器中单独打开，而不是嵌入在网页中。什么是替代解决方案或实现？

Answer 1

您可以使用PDFJs库。使用JS，您可以呈现pdf文件。请点击此处：https://mozilla.github.io/pdf.js/

Answer 2

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

<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> 标签有一个功能，当它无法加载项目时，它会加载自身内部的内容，即标签。由于对象标记无法在移动视图上加载，因此在移动设备上，嵌入标记将变为活动状态。

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

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

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

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

Answer 3

一个简单的选择是object元素提供一个后备功能，因此您可以执行以下操作：

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

然后，当移动浏览器无法获取该项目时，它将仅显示该项目，并且一切都准备就绪了。

Answer 4

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

Answer 5

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

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

go/src

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

Answer 6

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

Answer 7

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

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

我会共享代码，但是该站点上有一些关于代码的垃圾规则，不会让我共享它们，因此，我将让您留给Google，方法是通过查看实际上需要开发人员帮助的更好的站点来实现对象和iframe标签的工作方式。

玩得开心！

在移动浏览器中嵌入PDF

7 个答案: