在移动浏览器中嵌入PDF

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元素提供后备，所以你可以这样做：

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

然后，当移动浏览器无法获取该项目时，它只会显示此项，您将全部设置，有点。

Answer 3

我遇到了同样的问题。作为一名新开发者，我不知道移动浏览器在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'"  />

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