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

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

12 голосов
/ 23 ноября 2011

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

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

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

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

Ответы [ 4 ]

12 голосов
/ 06 декабря 2012

Это похоже на работу:

  • делает тег объекта достаточно большим, чтобы показать весь PDF, и
  • содержит его в div с ограниченной высотой и переполнением: auto - добавьте -webkit-overflow-scrolling в 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 голосов
/ 09 сентября 2013

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

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

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

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

Использованные трюки:

  1. Считайте ширину документа и масштабируйте рамку PDF в соответствии с этим
  2. "width: 100%" не работает с iframes в iPad, поэтому мне нужно было использовать преобразования CSS3
  3. Подождите, пока 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 + ")");
});
0 голосов
/ 16 сентября 2015

PDF.js отлично работает в нашем случае.

Вы можете проверить полное однострочное решение здесь: Сделать встроенный PDF прокручиваемым в iPad

Удачи

0 голосов
/ 25 ноября 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...