Создание встроенного PDF-прокрутки в iPad

У меня есть PDF, встроенный в HTML, используя тег объекта. Встроенный PDF-документ является большим документом, и при просмотре с моего рабочего стола PDF отображается правильно со списком прокрутки во всех браузерах, включая сафари. Однако, когда я просматриваю одну и ту же страницу html в iPad, встроенный PDF файл не имеет полосы прокрутки. Есть ли способ показать панель прокрутки в iPad для встроенного PDF-документа.

Код, используемый для встраивания PDF,

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

Я тоже пытался с iframe, и даже это не работает.

Ответы

Ответ 1

Это работает:

  • сделать тег объекта достаточно большим, чтобы показать весь PDF, и
  • содержать его в div с ограниченной высотой и переполнением: auto - add -webkit-overflow-прокрутка в iOS 5+ для хорошей, естественной прокрутки.

Вот код, который я использовал:

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

Ответ 2

Мне нужно то же самое, поэтому я разделяю.

Проблемы, с которыми я столкнулся:

Попробуйте следующее:

http://jsfiddle.net/aknMJ/2/embedded/result/

Используемые трюки:

  • Прочитайте ширину документа и масштабируйте рамку PDF в соответствии с этим
  • "width: 100%" не работает с iframe в iPad, поэтому мне нужно было использовать преобразования CSS3
  • Подождите, пока PDF файл полностью загрузится, а затем отобразите и измените размер рамки PDF. В противном случае содержимое было обрезано.
$('#pdfFrame').hide();
var pdfFrame = document.getElementById('pdfFrame');
pdfFrame.contentWindow.location.replace(PDF_URL);
$('#pdfFrame').on('load', function () {
    $('#pdfFrame').show();
    var documentWidth = $(document).width()
    var scale = (documentWidth / width) * 0.95;
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")");
});

Ответ 3

На iPad вы можете использовать два пальца для прокрутки встроенного содержимого - это работает для div с переполнением: прокрутка