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

Question

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

• плавающий фрейм?
• Объект?
• Код

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

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

Answer 1

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

Онлайн демо: http://mozilla.github.com/pdf.js/web/viewer.html

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

Answer 2

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

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

Answer 3

Вы также можете использовать 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.

Answer 4

Вы можете контролировать отображение 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>

Answer 5

Использование <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>

Answer 6

Преобразуйте его в 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), который работает как этот , но у него есть свои особые требования.

Answer 7

Найдите этот код - для вставки 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>

Answer 8

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

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

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

Answer 9

Наша проблема в том, что по юридическим причинам нам не разрешено временно хранить 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? Я надеюсь, что эти результаты сэкономят кому-то еще время.

Answer 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/