在移动浏览器中嵌入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! Your browser doesn't support PDFs!</p>
    <p><a href="some.pdf">Download Instead</a></p>
</object>

然后，当移动浏览器无法获取该项目时，它只会显示此内容，然后您就一切就绪了。

Answer 3

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

<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)为什么我们不能在所有情况下直接使用标签？

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

问）直接驱动器链接不起作用......那么为什么要采用此解决方案？

在上面的 google 驱动器 URL 中，view更改为preview. drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/查看?usp=sharing 变为, drive.google.com /file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/预览?usp=sharing

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