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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрите на этот код - чтобы вставить 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>

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

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

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

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

Вы можете использовать относительное местоположение сохраненного 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>

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/

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

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

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

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

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

Вот как я это сделал с 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>

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

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

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

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

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

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

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.

Мне пришлось предварительно просмотреть 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>

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

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

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

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

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