jQuery 使嵌入的 PDF 在 iPad 中可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15854537/
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
Make embedded PDF scrollable in iPad
提问by chrisnova10
For some reason the iPad safari browser does not handle embedded PDFs well. PDFs view fine on their own when launched standalone, but not with the object tag. The problem is that they don't scroll.
出于某种原因，iPad Safari 浏览器不能很好地处理嵌入的 PDF。PDF 在独立启动时可以自行查看，但不能使用对象标签查看。问题是它们不滚动。
I've got a jquery page with an embedded pdf which nicely scrolls on mozilla and chrome, but on safari (iPad) the PDF remains stuck on the first page and is not scrollable. The question is, how do I make this work on the iPad browser?
我有一个带有嵌入式 pdf 的 jquery 页面，它可以在 mozilla 和 chrome 上很好地滚动，但是在 safari (iPad) 上，PDF 仍然停留在第一页上并且不可滚动。问题是，如何在 iPad 浏览器上进行这项工作？
A similar question was posted here Making embedded PDF scrollable in iPadbut the answer is not very good. They're cheating by using a height of 10000px, which creates a lot of whitespace for a small doc, and potentially won't work for a very large doc:
此处发布了一个类似的问题使嵌入式 PDF 在 iPad 中可滚动，但答案不是很好。他们通过使用 10000px 的高度来作弊，这为小文档创建了大量空白，并且可能不适用于非常大的文档：
<!DOCTYPE html>
<html>
<head>
<title>PDF frame scrolling test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; }
object { width: 500px; height: 10000px }
</style>
</head>
<body>
<div id="container">
<object id="obj" data="my.pdf" >object can't be rendered</object>
</div>
</body>
</html>
Any way to get this done without hardcoding a crazy height?
有什么方法可以在不硬编码疯狂高度的情况下完成这项工作？
回答by MSD
I have tried for years to find a solution to this problem. I will try to save anyone looking for it some time: THERE IS NO SOLUTION TO THIS PROBLEM. The way Safari handles PDF rendering is hopelessly in conflict with the entire concept of embedding a PDF in a webpage. Moreover, all browsers on an iPad are REQUIRED to use the Safari rendering engine, so you won't even be able to instruct users to install another browser.
多年来，我一直试图找到解决此问题的方法。我会尽力拯救任何寻找它的人：这个问题没有解决方案。Safari 处理 PDF 渲染的方式与在网页中嵌入 PDF 的整个概念完全冲突。此外，iPad 上的所有浏览器都需要使用 Safari 渲染引擎，因此您甚至无法指示用户安装其他浏览器。
The only way to embed a PDF with decent results is to use a 3rd party rendering utility of some sort. There are some jQuery solutions out there, but for my purposes, I found the simplest way to do it was to embed a google doc viewer link in an object or iframe tag. This is relatively simple to do, and you can find simple instructions here:
以体面的结果嵌入 PDF 的唯一方法是使用某种 3rd 方渲染实用程序。有一些 jQuery 解决方案，但出于我的目的，我发现最简单的方法是在对象或 iframe 标签中嵌入一个谷歌文档查看器链接。这相对简单，您可以在此处找到简单的说明：
How to view Google drive pdf link in iframe
如何在 iframe 中查看 Google Drive pdf 链接
This solution includes good display rendering and simple pagination and zoom controls. Be sure to include the &embedded=true option if you are embedding it in an iframe or object tag or it won't work. The viewer requires a publicly accessible url to your document, so if you have security concerns, like me, you will need to write a web service to serve the document up from a single use token.
该解决方案包括良好的显示渲染和简单的分页和缩放控制。如果您将它嵌入到 iframe 或对象标记中，请确保包含 &embedded=true 选项，否则它将不起作用。查看器需要一个可公开访问的 url 到您的文档，因此如果您有安全问题，就像我一样，您将需要编写一个 Web 服务来从一次性令牌提供文档。
There is a good webpage that lists several other options should you be looking for something a little more robust:
如果您正在寻找更强大的东西，有一个很好的网页列出了其他几个选项：
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
回答by VanBoch
PDF.js can be the right choice. It works perfectly for us.
PDF.js 可能是正确的选择。它非常适合我们。
You just download it from https://mozilla.github.io/pdf.js/and place it in your website.
您只需从https://mozilla.github.io/pdf.js/下载它并将其放置在您的网站中。
Then it can be included in an iframe
然后它可以包含在 iframe 中
<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>
A demo can be found here: https://mozilla.github.io/pdf.js/web/viewer.html
可以在此处找到演示：https: //mozilla.github.io/pdf.js/web/viewer.html
Regards
问候
回答by Matjaz Trcek
The MSD's answer is quite accurate. I have been trying to do it in many different ways, from some of the libs suggested to using object, embed element etc.
MSD 的回答非常准确。我一直在尝试以多种不同的方式来做到这一点，从一些建议的库到使用对象、嵌入元素等。
In any case it doesn't scroll for me (iPad air 2 and air 1 at least on iOS 8). Or it scrolls with overly stretched letter, or only works on short 1-2 page documents.
在任何情况下它都不会为我滚动（iPad air 2 和 air 1 至少在 iOS 8 上）。或者它会滚动过度拉伸的字母，或者仅适用于 1-2 页的短文档。
The solutionwhich I found the most efficient is providing a link to iPad users via user agent to access the file directly, they will be able to see it in the tab and scroll nicely through it. It does not embed, but it is the most efficient and working solution I could find for my current needs.
我发现最有效的解决方案是通过用户代理向 iPad 用户提供一个链接以直接访问文件，他们将能够在选项卡中看到它并很好地滚动浏览它。它不嵌入，但它是我能找到的最有效和最有效的解决方案，以满足我当前的需求。
I hope it helps somebody delving into the same thing
我希望它可以帮助某人深入研究同一件事
回答by Alex Miralles
You don't need to set the height of the object to something crazy, just set it so the same height as your container element. To scroll using the hopeless Safari rendering object you need to use two fingers(both up/down and left/right).
您不需要将对象的高度设置为疯狂的东西，只需将其设置为与容器元素相同的高度。要使用无望的 Safari 渲染对象滚动，您需要使用两个手指（向上/向下和向左/向右）。
I also have this properties set up in my container element:
我还在我的容器元素中设置了以下属性：
overflow: scroll;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;
Something I couldn't achieve was to get it fill the width on the container, but at least you can navigate through the document.
我无法实现的是让它填充容器上的宽度，但至少您可以浏览文档。
回答by coreehi
Another solution (without coding) is to use Google if you only want to use embeddings selectively.
如果您只想有选择地使用嵌入，另一种解决方案（无需编码）是使用 Google。
- Store your pdf in your Google Drive
- Open it with preview.
- Select "Open in new window" from the submenu of the three items.
- In the new window select "Embed item" in the submenu of the three items.
- Copy the iframe code and paste it into your page.
- 将您的 pdf 存储在您的 Google 云端硬盘中
- 用预览打开它。
- 从三个项目的子菜单中选择“在新窗口中打开”。
- 在新窗口中，在三个项目的子菜单中选择“嵌入项目”。
- 复制 iframe 代码并将其粘贴到您的页面中。
Hereyou can also find detailed instructions and under point 12 you can see the iframe code.
在这里您还可以找到详细说明，在第 12 点下您可以看到 iframe 代码。
回答by andres
static downloadPdfChromeApp(linkSource: string) {
// Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data
const divpdf = document.createElement('div');
divpdf.innerHTML = '<div style="display:none;position:absolute">' +
'<object style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' +
linkSource + '"></object></div>';
document.firstElementChild.appendChild(divpdf);
const frame = document.getElementById('docuFrame') as HTMLObjectElement;
window.open(frame.data);
divpdf.remove();
}
回答by David Chando
Hopefully this can help others in the future. I used google's pdf viewer to be able to scroll a pdf in an iframe. So on the src tag the url is
希望这可以在未来帮助其他人。我使用谷歌的 pdf 查看器能够在 iframe 中滚动 pdf。所以在 src 标签上的 url 是
https://docs.google.com/gview?url=' + ‘insert link to PDF' + embedded=true
https://docs.google.com/gview?url=' + '插入 PDF 链接' + Embedded=true
