使嵌入式PDF在iPad中可滚动 [英] Making embedded PDF scrollable in iPad

查看:104
本文介绍了使嵌入式PDF在iPad中可滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用object标签在HTML中嵌入了PDF。嵌入式PDF是一个大文档,从我的桌面查看时,PDF可以在包括Safari浏览器在内的所有浏览器中使用滚动条正确显示。但是,当我在iPad中查看相同的HTML页面时,嵌入式PDF没有滚动条。有什么方法可以在iPad中显示嵌入式PDF文档的滚动条?



用于嵌入PDF的代码是

 < object data =pdf.pdftype =application / pdfwidth =1000pxheight =1200pxid =pdfDocname =pdfDoc>< / object> 

我也尝试过使用iframe,即使这样也行。

解决方案

这似乎工作:


  • 使对象标记足够大显示整个PDF,并且
  • 将它包含在一个高度有限和溢出的div中:auto-add -webkit-overflow在iOS 5+中滚动以获得良好的本地滚动效果。
  • li>


以下是我使用的代码:

 <!DOCTYPE html> 
< html>
< head>
< title> PDF帧滚动测试< / 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;身高:500px; }
object {width:500px; height:10000px}
< / style>
< / head>
< body>
< div id =container>
< object id =objdata =my.pdf>对象无法呈现< / object>
< / div>
< / body>
< / html>


I have a PDF embedded in HTML using the object tag. The embedded PDF is a big document and when viewed from my desktop the PDF is displayed properly with scrollbar in all the browsers including safari. However when I view the same html page in iPad the embedded PDF does not have a scrollbar. Is there any way in which we can show the scrollbar in iPad for an embedded PDF document.

The code used for embeding the PDF is

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

I tried with iframe too and even that does not work.

解决方案

This seems to work:

  • make the object tag big enough to show the whole PDF, and
  • contain it in a div with limited height and overflow:auto -- add -webkit-overflow-scrolling in iOS 5+ for good, native scrolling.

Here's the code I used:

<!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>

这篇关于使嵌入式PDF在iPad中可滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆