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

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

плавающий фрейм?
Object?
Вставить?

Что скажет сам Adobe об этом?

В моем случае PDF создается "на лету", поэтому он не может быть загружен в стороннее решение до его очистки.

Ответы

Ответ 1

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

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

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

Ответ 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">

Ответ 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.

Ответ 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>

Ответ 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>

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

Ответ 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>

Ответ 8

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

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

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

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

Ответ 10

Создайте контейнер для хранения вашего PDF
```
<div id="example1"></div>
```

Укажите PDFObject, какой PDF файл вставлять и где его встраивать

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

При желании вы можете использовать CSS для указания визуального стиля, включая размеры, границы, поля и т.д.
```
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
```

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

Ответ 11

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

Подробнее см. Инструменты разработчика.

Ответ 12

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

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

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

Ответ 13

<object width="400" height="400" data="helloworld.pdf"></object>

Ответ 14

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

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

Ответ 15

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

Example1

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

Пример2

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

Ответ 16

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

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

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

Ответ 17

Так я сделал с 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>

Ответ 18

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

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

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

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

Ответ 19

Как и многие замечательные ответы на этой странице, я также нашел PDFObject очень полезным... конечно же, стоит посмотреть.

Ответ 20

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

Ответ 21

Если вы можете преобразовать свой pdf файл в изображение, перейдите на https://www.base64-image.de, разместите свое изображение внутри, и оно преобразует его в base64 для вас. Затем поместите код в тег изображения.

Ответ 22

Вы должны сделать PDF, прежде чем показывать его.

Вы можете отображать PDF в image/html на стороне сервера, используя библиотеку mupdf.
Вы также можете отображать PDF в image/html в браузере, используя библиотеку, такую как pdf.js
Вы также можете визуализировать PDF на основе системной библиотеки, такой как PDF-объект (это просто виджет).

Ответ 23

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

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