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

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

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

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

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

+1079
14 нояб. '08 в 23:55
источник поделиться
23 ответа

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

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

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

+502
15 нояб. '08 в 0:01
источник

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

<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">
+480
12 авг. '11 в 17:29
источник

Связанные вопросы


Похожие вопросы

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

+344
10 мар. '10 в 13:38
источник

У вас есть некоторый контроль над тем, как 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>
+101
02 мар. '11 в 18:36
источник

Использование как <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>
+53
15 мая '14 в 14:36
источник

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

+20
06 дек. '11 в 18:17
источник

Взгляните на этот код. Чтобы вставить 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>
+16
04 февр. '10 в 12:05
источник

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

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

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

+12
15 нояб. '08 в 23:11
источник

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

+8
20 окт. '17 в 5:51
источник
  • Создайте контейнер для хранения 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/

+7
19 авг. '16 в 0:30
источник

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

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

+7
15 нояб. '10 в 23:50
источник
<object width="400" height="400" data="helloworld.pdf"></object>
+3
03 февр. '16 в 14:36
источник

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

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

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
+3
19 мая '15 в 23:32
источник

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

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

+3
23 февр. '17 в 20:09
источник

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

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

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

+2
15 нояб. '08 в 23:53
источник

Так я сделал с 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>
+1
17 мая '18 в 9:26
источник
  1. Построить blob входных байтов PDF
  2. Используйте iframe и PDF.js, исправленные с помощью этого кросс-браузера

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

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

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

0
18 июл. '18 в 13:10
источник

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

0
16 июн. '19 в 21:56
источник

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

0
07 авг. '18 в 16:21
источник

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

0
03 дек. '17 в 11:21

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

-1
18 сент. '17 в 16:03
источник

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

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

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

<script>window.location='url'</script>
-6
13 окт. '17 в 13:44
источник

Посмотрите другие вопросы по меткам или Задайте вопрос