Рекомендуемый способ встраивания PDF в HTML?


1182

Каков рекомендуемый способ встраивания PDF в HTML?

  • плавающий фрейм?
  • Объект?
  • Встраивание?

Что Adobe говорит об этом сама?

В моем случае PDF-файл создается на лету, поэтому его нельзя загрузить в стороннее решение перед его очисткой.


6
Попробуйте pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
Tezcat

В вики репозитория pdf2htmlEX есть отличное сравнение не только конкретных решений, но и общих стратегий . Кроме того, хотя я не пробовал это, это похоже на поддерживаемую развилку.
ShreevatsaR

Ответы:


540

Вероятно, лучший подход - использовать библиотеку PDF.JS. Это чистый HTML5 / JavaScript рендеринг для документов PDF без каких-либо сторонних плагинов.

Демоверсия в Интернете: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js


12
Как отмечалось в другом ответе, scribd фактически использует pdf2swf для преобразования pdf-файлов
Питер Крэйг,

8
Я настоятельно рекомендую не использовать scribd - я только что провел эксперимент с конкретным документом, и в Firefox 4 он отображает только первые 3 страницы, в то время как в IE9 текст рендеринга неверен - он смещает некоторые разделы страницы. Технически говоря, это глючит. Кроме того, они ожидают, что вы подпишитесь на печать или загрузку документов! По сути, они берут ранее бесплатные документы и устанавливают вокруг них платный доступ.
Франкстер

9
Библиотека PDF.js на самом деле выглядит очень хорошим решением, хотя связанная демонстрационная версия не показывает, что она встроена в страницу (она занимает всю страницу). Но он использует HMTL5 canvas, поэтому его легко внедрить, и это быстро . С другой стороны, требуется несколько js для использования, в отличие от <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
LarsH

33
pdf.js плохо работает на планшетных браузерах, таких как Chrome. Я также считаю, что это очень, очень медленно для больших PDF-документов.
Рокко Тако

10
Я не могу поверить, что это рекомендуется. Посмотрите на рендеринг шрифтов в онлайн-демонстрации, они выглядят неровно и ужасно. Это выглядит намного лучше с субпиксельным рендерингом при открытии в Adobe Reader.
скоростной самолет

532

Это быстро, просто, точно и не требует никакого стороннего скрипта:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

ОБНОВЛЕНИЕ (1/2018):

Браузер Chrome на Android больше не поддерживает встраивание PDF. Вы можете обойти это, используя Google Drive PDF Viewer

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

30
Лучше использовать тег <object>, чтобы вы могли включить запасной вариант.
Джонатон Хилл

1
Я думал, что разработчики хотели бы знать, что Mac / Firefox получает испорченное изображение плагина. Страница плагина не загружает тот плагин, который ищет. Есть идеи как обойти это?
Shanimal

63
если вы хотите убедиться, что он будет показан вместо автоматической загрузки pdf-файла (как это произошло со мной), добавьте type='application/pdf'его в тег для вставки
Hassek

32
Лучше использовать <object>тег, потому что он может отображать альтернативный контент в браузерах, которые не могут отображать PDF-файлы. Можно даже поставить <embed>тег в <object>тег, если хотите. Ссылка: stackoverflow.com/questions/1244788/embed-vs-object
Рафаэль

1
@raphaelcm На самом деле, как я уже говорил, использование тега embed работает во всех основных браузерах. Даже IE 7 и 8.
Батфан

361

Вы также можете использовать Google PDF Viewer для этой цели. Насколько я знаю, это не официальная функция Google (я не прав в этом?), Но она работает для меня очень хорошо и гладко. Вам нужно загрузить свой PDF где-то раньше и просто использовать его URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Важно то, что ему не нужен Flash-плеер, он использует JavaScript.


29
Следует отметить, что существует верхний предел размера PDF, который можно отобразить. Я думаю, что это в настоящее время 10 МБ / 100 страниц. PS: я не думаю, что зритель "неофициальный"; у них даже есть страница с практическими рекомендациями, которая
создает

30
Эта опция прекрасно работает, но вы должны сделать свои PDF-файлы общедоступными, что для меня не всегда вариант.
KoviNET

4
@riot_starter это решение больше не работает, если вы полностью вышли из Google, оно загружается нормально, если вы полностью вошли в него, оно загружается нормально, однако, если вы находитесь между (что бы это ни значило), оно запрашивает ваш пароль. А в случае с iframe он просто не загружается.
Двена

5
Вам разрешается установить конфиденциальность любой Google Docs между public, sign-in requiredи private. Это определенно официальная функция, учитывая, что любой документ в Документах Google имеет embedопцию.
b1nary.atr0phy

6
Еще одна вещь, о которой следует упомянуть, это предупреждение «Вы недавно сделали слишком много запросов», что является ограничением.
kommradHomer

116

Вы можете контролировать отображение PDF в браузере, передавая некоторые параметры в строке запроса. Я был рад этой работе, пока не понял, что она не работает в IE8. :(

Он работает в Chrome 9 и Firefox 3.6, но в IE8 он показывает сообщение «Вставьте сюда сообщение об ошибке, если PDF не может быть отображен».

Тем не менее, я еще не тестировал более ранние версии браузеров. Но вот код, который у меня есть в любом случае, на случай, если он кому-нибудь поможет. Это устанавливает масштаб до 85%, удаляет полосы прокрутки, панели инструментов и панели навигации. Я обновлю свой пост, если найду что-то, что работает и в IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

6
Это лучшее решение, поскольку оно использует возможности браузера, а не сложное стороннее решение. Во всех современных браузерах (IE9, FF или Chrome) PDF должен встраиваться красиво. Извините за пользователей IE 6/7. Они должны обновить. Мы прекратили поддерживать эти браузеры давно. :(
Адриан П.

2
Не работает на моем мобильном планшете издание Chrome..FYI ... Жаль, было бы быстрое решение.
Рокко Тако

1
+1 для адресации параметров масштабирования и прокрутки, однако, это не работает в последней версии Chrome (44) ... Не удалось загрузить документ PDF.
NotJay

Можно добавить кнопку закрытия? и как?
Роберто Сепульведа Браво

@RoccoTheTaco Seconded, не работает на мобильном Chrome на Android
Anonymous

66

Использование обоих <object>и <embed>даст вам более широкую совместимость браузера.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

4
Это не будет работать в браузерах, если pdf addon не установлен или устарел
Umair Hamid

Кроме того, это не будет проверяться для тех, кто занимается проверкой кода.
NotJay

1
Это отлично сработало для меня, тогда как использование embedтега само по себе считалось unsafeChrome и Firefox.
Ричи Томас

1
По какой-то причине на Android (chrome) он не встраивает PDF-файл, а предлагает скачать его. На iPhone (сафари) он показывает только первую страницу PDF.
Иван Рубинсон

21

Преобразуйте его в PNG через ImageMagick и отобразите PNG (быстро и грязно).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Это хороший вариант, если вам нужно быстрое решение, вы хотите избежать кросс-браузерных проблем с просмотром PDF, и если PDF - это всего лишь страница или две. Конечно, вам нужно установить ImageMagick (который, в свою очередь, нуждается в Ghostscript) на ваш веб-сервер, опция, которая может быть недоступна в средах общего хостинга. Существует также плагин PHP (называемый imagick), который работает следующим образом, но у него есть свои особые требования.


Или конвертируйте изображение в формат PNG с помощью приложения, например «Просмотр на Mac».
Гарретт

2
но вы можете сделать это программно?
Дэн Мантила

Что делать, если документ имеет более 1 страницы? Полагаю, вы покажете только первую страницу
января

@seb это было давно, но я смог использовать его на 2-х или 3-х страничных PDF-файлах. Было бы неразумно делать это намного крупнее, я думаю, что в мобильных браузерах трудно отображать подобные изображения. Вот почему я назвал его «быстрым и грязным» методом, но я думаю, что это хороший метод, если PDF-файл содержит не более нескольких страниц.
Дэн Мантила

1
Если вы откроете PDF-файл с помощью библиотеки Zend, тогда вы сможете создать foreach($pdf->pages as $page)и создать изображение для каждой страницы
99 Проблемы - Синтаксис не один

19

Посмотрите на этот код - чтобы вставить PDF в HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

6
Это не похоже на работу. Я всегда получаю пустой серый экран вместо PDF. Но переключение srcна data, как в ответе @ Gayle, работает.
Мотти

1
Я использую Chrome 44, и он не будет работать. Я также попытался переключить данные в SRC.
NotJay

1
type = "application / pdf" решает проблему. Работает нормально в хроме.
Гэвин Симпсон,

13

FDView объединяет PDF2SWF (который сам основан на xpdf ) с программой просмотра SWF, поэтому вы можете конвертировать и вставлять документы PDF на лету на своем сервере.

xpdf не идеальный конвертер PDF. Если вам нужны лучшие результаты, тогда у Ghostview есть возможность конвертировать PDF-документы в другие форматы, для которых вам, возможно, будет проще создать Flash Viewer.

Но для простых документов PDF FDView должен работать достаточно хорошо.


Доступен ли FDView где-нибудь еще? code4net.com, кажется, исчез.
Майкл Майерс

@ Майкл Не то, чтобы я мог легко найти. Я оставлю этот ответ на всякий случай, если кто-то перенастроит fdview где-нибудь еще.
Адам Дэвис

12

Наша проблема в том, что по юридическим причинам нам не разрешено временно хранить PDF на жестком диске . Кроме того, вся страница не должна быть перезагружена при отображении PDF в качестве предварительного просмотра в браузере.

Сначала мы попробовали PDF.jS. Он работал с Base64 в средстве просмотра для Firefox и Chrome. Однако это было недопустимо медленно для нашего PDF. IE / Edge не работал вообще.

Поэтому мы попробовали это со строкой Base64 в теге объекта HTML. Это опять не работает для IE / Edge (возможно, та же проблема, что и с PDF.js). В Chrome / Firefox / Safari опять нет проблем. Вот почему мы выбрали гибридное решение. В IE / Edge мы используем IFrame и для всех других браузеров объект-тег.

Конечно, решение IFrame также подойдет для Chrome и co. Причина, по которой мы не использовали это решение для Chrome, заключается в том, что, хотя PDF отображается правильно, Chrome отправляет новый запрос на сервер, как только вы нажимаете «скачать» в предварительном просмотре . Обязательное скрытое поле pdfHelperTransferData (для отправки данных формы, необходимых для создания PDF) больше не задается, поскольку PDF отображается в IFrame. Для этой функции / ошибка см.Chrome отправляет два запроса при загрузке PDF (и отменяет один из них) .

Теперь проблемы детей IE9 и IE10 остаются. Для этого мы отказались от решения для предварительного просмотра и просто отправили документ, нажав кнопку предварительного просмотра для загрузки пользователю (вместо предварительного просмотра). Мы много пытались, но даже если бы мы нашли решение, дополнительные усилия для этой крошечной части пользователей не стоили бы усилий. Вы можете найти наше решение для загрузки здесь: Скачать PDF без обновления с IFrame .

Наш Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Наш HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Чтобы проверить тип браузера для IE / Edge, смотрите здесь: Как я могу обнаружить Internet Explorer (IE) и Microsoft Edge, используя JavaScript? Я надеюсь, что эти результаты сэкономят кому-то еще время.


Извините, но я не понимаю, какое значение имеет переменная "TransferData"?
Кейт

1
Привет @Kate, В нашем случае мы генерируем PDF на основе ввода пользователя в нашей веб-форме. «TransferData» содержит данные, которые отправляются в виде JSON в функцию генерации PDF в веб-API. Я добавил строку больше кода для уточнения.
Джордж Махарис

10

Вы можете использовать относительное местоположение сохраненного PDF-файла следующим образом:

Example1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Example2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>


10
  1. Создайте контейнер для хранения вашего PDF

    <div id="example1"></div>
  2. Скажите PDFObject, какой PDF для встраивания и где его встраивать

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
  3. При желании вы можете использовать CSS для указания визуального стиля, включая размеры, границы, поля и т. Д.

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>

источник: https://pdfobject.com/


Это было очень хорошее решение и хорошо работало в сочетании с начальной загрузкой. Все это пошло поверх других элементов начальной загрузки.
19

Вы пробовали с BLOB-файлом? Я использовал это с pdf.output('bloburl')lib jspdf, но, похоже, не работает на IE11.
Хоанг Тран Сон,

8

Scribd больше не требует размещения ваших документов на их сервере. Если вы создадите учетную запись с ними, чтобы получить идентификатор издателя. Для загрузки файлов PDF, хранящихся на вашем собственном сервере, требуется всего несколько строк кода JavaScript.

Для получения дополнительной информации см. Инструменты разработчика .


1
Не могли бы вы опубликовать еще одну ссылку, показывающую, как это делается? Это не ясно из ссылки, которую вы разместили.
SuperElectric

Похоже, они обновили свой сайт и изменили эту страницу. Я думаю, что на этой странице есть содержание, на которое я ссылался в своем оригинальном сообщении: scribd.com/developers/api?method_name=Javascript+API
Bjorn

Хотелось бы, чтобы мне это нравилось не раз, оно отлично работает. Прокрутите страницу вниз и нажмите API, чтобы увидеть примеры.
Рокко Тако

1
Регистрации теперь закрыты для scribd.
Лэнс Фишер


4

PdfToImageServlet с помощью команды ImageMagick convert.

Пример использования: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>


4

Вот как я это сделал с AXIOS и Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

динамически добавить urlPDF в HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

3

Один из вариантов, который вы должны рассмотреть, - это « Примечательный PDF».
У него есть бесплатный план, если вы не планируете проводить онлайн-сотрудничество в режиме реального времени в формате PDF.

Вставьте следующее iframeв любой HTML и наслаждайтесь результатами:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

2

Чтобы передать файл в браузер, см. Вопрос «Переполнение стека». Как передать файл PDF как двоичный файл в браузер с помощью .NET 2.0 - обратите внимание, что с небольшими изменениями это должно работать независимо от того, подаете ли вы файл из файловой системы. или динамически генерируется.

С учетом вышесказанного в статье MSDN, на которую делается ссылка, делается довольно упрощенный взгляд на мир, поэтому вы можете прочитать « Успешно» Потоковая передача PDF в браузер через HTTPS, а также некоторые заголовки, которые вам, возможно, потребуется предоставить.

Используя этот подход, iframe, вероятно, лучший путь. Имейте одну веб-форму, которая передает файл, и затем поместите iframe на другую страницу с его srcатрибутом, установленным в первую форму.


4
@ downvoter не хочет объяснить, почему вы анонимно отрицаете 10-летний ответ?
GalacticCowboy

1
  1. Создайте блоб из входных PDF-байтов
  2. Используйте iframe и PDF.js, исправленные с помощью этого кросс-браузерного обходного пути

URI для iframe должен выглядеть примерно так:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, переданном через стандартный BLRI URI в URL.


1

Мне пришлось предварительно просмотреть PDF с React, поэтому после попытки нескольких библиотек моим оптимальным решением было получить данные и обработать их.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

0

Если вы не хотите размещать PDF.JS самостоятельно, вы можете попробовать DocDroid . Это похоже на Google Drive PDF Viewer, но позволяет настраивать брендинг.


0

просто используйте iFrame для PDF.

У меня были особые потребности в приложении React.js, я пробовал миллионы решений, но в итоге получил iFrame :) Удачи!


-7

Я обнаружил, что это работает очень хорошо, и браузер обрабатывает его в Firefox. Я не проверял IE ...

<script>window.location='url'</script>

Чего это должно достичь? Я не вижу, как это отвечает на вопрос.
TRiG

Когда я встраиваю PDF в свой HTML, я считаю, что лучше всего иметь ссылку на этот документ. например, <a href=" server1.network/trifold_JonesChiro.pdf "target='_blank'> Client Portal Trifold (пример) </a> иногда бывает чистым ответом открыть страницу и показать pdf против tring для ее размещения в HTML. Это также позволяет PDF оставаться открытым во вкладке.
Уинн

Таким образом, ваша рекомендация - ссылаться, а не вставлять? Это хорошо, но в качестве ответа это совершенно неясно.
TRiG
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.