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

По какой-то причине браузер Safari для iPad не обрабатывает встроенные PDF файлы. PDF файлы прекрасно видны при запуске автономно, но не с тегом объекта. Проблема в том, что они не прокручиваются.

У меня есть страница jquery со встроенным pdf, который красиво прокручивается на mozilla и chrome, но на сафари (iPad) PDF остается застрявшим на первой странице и не прокручивается. Вопрос в том, как мне сделать эту работу в браузере iPad?

Аналогичный вопрос был размещен здесь Встраивание PDF-прошивки в iPad, но ответ не очень хорош. Они обманывают, используя высоту 10000 пикселей, что создает много пробелов для небольшого документа и, возможно, не будет работать для очень большого документа:

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

Любой способ сделать это без жесткого кодирования сумасшедшей высоты?

Ответы

Ответ 1

Я годами пытался найти решение этой проблемы. Я постараюсь спасти любого, кто ищет это некоторое время: ЭТОЙ ПРОБЛЕМЫ НЕТ РЕШЕНИЕ. То, как Safari обрабатывает рендеринг PDF, безнадежно противоречит всей концепции встраивания PDF в веб-страницу. Более того, все браузеры на iPad ТРЕБУЮТСЯ использовать движок рендеринга Safari, поэтому вы даже не сможете дать указание пользователям установить другой браузер.

Единственный способ встроить PDF с хорошими результатами - использовать какую-либо стороннюю утилиту рендеринга. Существуют некоторые решения jQuery, но для моих целей я нашел самый простой способ сделать это - вставить ссылку просмотра Google doc в тег объекта или iframe. Это относительно просто сделать, и вы можете найти простые инструкции здесь:

Как просмотреть Google Drive PDF ссылку в iframe

Это решение включает в себя хорошую визуализацию дисплея и простое управление разбиением на страницы и масштабированием. Обязательно включите параметр & embedded = true, если вы встраиваете его в тег iframe или объекта или он не будет работать. Для просмотра необходим общедоступный URL-адрес вашего документа, поэтому, если у вас есть проблемы с безопасностью, такие как я, вам потребуется написать веб-сервис для обслуживания документа с использованием одноразового токена.

Есть хорошая веб-страница, которая перечисляет несколько других вариантов, если вы ищете что-то более надежное:

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

Ответ 2

PDF.js может быть правильным выбором. Он отлично работает для нас.

Вы просто загрузите его из https://mozilla.github.io/pdf.js/ и разместите его на своем веб-сайте.

Затем он может быть включен в iframe

<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>

Демо можно найти здесь: https://mozilla.github.io/pdf.js/web/viewer.html

Привет

Ответ 3

Ответ MSD довольно точен. Я пытался сделать это по-разному, от некоторых из libs, предлагаемых к использованию объекта, встроенного элемента и т.д.

В любом случае он не прокручивает меня (iPad 2 и воздух 1, по крайней мере, на iOS 8). Или он прокручивается с чрезмерно растянутым письмом или работает только на коротких 1-2страничных документах.

решение, которое я нашел наиболее эффективным, - это предоставление пользователям IPad пользователям через пользовательский агент для прямого доступа к файлу, они смогут видеть его на вкладке и прокручивать через него. Он не встраивается, но это наиболее эффективное и эффективное решение, которое я мог бы найти для своих текущих потребностей.

Я надеюсь, что это поможет кому-то углубиться в одно и то же.

Ответ 4

Вам не нужно устанавливать высоту объекта на что-то сумасшедшее, просто установите его на ту же высоту, что и ваш элемент контейнера. Для прокрутки с использованием безнадежного объекта рендеринга Safari вам нужно использовать два пальца (вверх/вниз и влево/вправо).

У меня также есть эти свойства, установленные в моем контейнере:

overflow: scroll;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;

Что-то, чего я не мог достичь, это заполнить ширину контейнера, но по крайней мере вы можете перемещаться по документу.

Ответ 5

Другое решение (без кодирования) - использовать Google, если вы хотите использовать вложения только выборочно.

Сохраните PDF в своем Google Диске
Откройте его с предварительным просмотром.
Выберите "Открыть в новом окне" в подменю трех пунктов.
В новом окне выберите "Вставить элемент" в подменю из трех элементов.
Скопируйте код iframe и вставьте его на свою страницу.

Здесь вы также можете найти подробные инструкции, а в пункте 12 вы можете увидеть код iframe.

Ответ 6

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();
    }

Ответ 7

Надеюсь, это может помочь другим в будущем. Я использовал Google PDF Viewer, чтобы иметь возможность прокручивать PDF в iframe. Таким образом, для тега src URL-адрес

https://docs.google.com/gview?url= + ‘Вставить ссылку в PDF + встроенный = true