Html 在移动浏览器中嵌入 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36382249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed PDF in mobile browsers
提问by Lane
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
我有下面的代码，它是我需要的完美解决方案，它本质上是在我的网页中嵌入任何 JPG、GIF、PNG 或 PDF 文件。它在 PC 浏览器中完美运行，但由于其目标用户，页面的一个关键要求是让它们在移动浏览器中兼容。
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
虽然图像文件工作正常，但 PDF 文件在移动浏览器中单独打开，而不是内嵌在网页中。对此的替代解决方案或实现是什么？
回答by ivash
You can use PDFJs library. Using just JS you can render pdf files. Please , check here : https://mozilla.github.io/pdf.js/
您可以使用 PDFJs 库。只使用 JS 就可以渲染 pdf 文件。请在这里查看：https: //mozilla.github.io/pdf.js/
回答by mlissner
One simple option is that the the objectelement provides a fallback, so you can do:
一个简单的选择是object元素提供后备，因此您可以执行以下操作：
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p><a href="some.pdf">Download Instead</a></p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
然后，当移动浏览器无法获取该项目时，它只会显示此内容，您就一切就绪了，有点。
回答by Treyarder
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
我发现允许您嵌入 pdf 的唯一方法是使用 Google 驱动器，然后在打开文件后选择菜单按钮，然后选择获取嵌入代码，您只能使用 Google 驱动器或 Google 文档参考。并且您还必须打开公开共享，否则未经许可其他人将无法查看。
回答by Treyarder
Use an object tag with a iframe tag inside your object tags.
在对象标签中使用带有 iframe 标签的对象标签。
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
通过更改类型，对象数据可以是 pdf 或 png 文件，并且可以使用您想要存储在任何位置的任何链接，但是 I 帧是将为手机加载的，必须是来自 Google 驱动器或 Google 文档的链接还需要允许公开共享文件，否则其他人将无法查看它们。
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
我会分享代码，但这个网站有一些关于代码的垃圾规则，不会让我分享它们，所以我会让你通过查看实际上需要开发人员帮助的更好的网站来谷歌对象和 iframe 标签的工作方式。
Have fun guys!
玩得开心小伙伴们！
回答by Mike
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
我遇到了同样的问题。作为一名新开发人员，我不知道移动浏览器在 iframe 中嵌入 PDF 文件存在问题。我现在……哈哈
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF. Looks like this:
当我意识到移动浏览器在新窗口中显示 PNG 文件没有问题时，我绞尽脑汁试图让它发挥作用。因此，以我无限的智慧，我在 Gimp 2.0 中打开了 PDF 文件，然后将它们导出为 PNG 文件。然后我创建了供用户单击的按钮，现在它会打开图形而不是尝试嵌入 PDF。看起来像这样：
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
我不知道这对你来说是否可行，但它对我来说效果很好。
