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

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

Онлайн-демонстрация: http://mozilla.github.com/pdf.js/web/viewer.html

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

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

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

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

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

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

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

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

Вы также можете использовать для этого программу просмотра PDF-файлов Google. Насколько я знаю, это не официальная функция 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.

Scribd больше не требует, чтобы вы размещали свои документы на их сервере. Если вы создадите учетную запись с ними, вы получите идентификатор издателя. Для загрузки файлов PDF, хранящихся на вашем собственном сервере, требуется всего несколько строк кода 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>

Это быстро, легко, по делу и не требует сторонних скриптов:

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

ОБНОВЛЕНИЕ (03.02.2021)

Adobe теперь предлагает собственный PDF Embed API.

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

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

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

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

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

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

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

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

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

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

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/

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

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

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

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

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

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

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

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

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

Так я поступил с AXIOS и Vue.js:

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

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

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

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

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

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

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

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

Пример1

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

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

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

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

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

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class = "embed-responsive embed-responsive-1by1">
  <iframe class = "embed-responsive-item" src = "http://example.com/the.pdf" type = "application/pdf" allowfullscreen></iframe>
</div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Раньше у меня возникла проблема с внедрением base64, закодированного с помощью PDF, из-за ограничения URI, поэтому любые файлы размером более 2 МБ не будут правильно отображаться в Chrome.

Мое решение:

1. Преобразование URI, закодированного в Blob:

2. Создайте временную базу строки DOM на Blob.

   const blob = dataURItoBlob(this.dataUrl);

   var temp_url = window.URL.createObjectURL(blob);

3. Решите, где вы хотите прикрепить iframe к DOM:

   const target = document.querySelector(targetID);

   target.innerHTML = `<iframe src='${temp_url}' type = "application/pdf"></iframe>

Если вы не хотите размещать PDF-файлы самостоятельно или хотите настроить программу просмотра PDF-файлов с дополнительными функциями безопасности, такими как запрет пользователям загружать PDF-файл. Рекомендую использовать CloudPDF. https://cloudpdf.io

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>CloudPDF Viewer</title>
  <style>
    body, html {
      height: 100%;
      margin: 0px;
    }
  </style>
</head>
<body style = "height: 100%">
  <div id = "viewer" style = "width: 800px; height: 500px; margin: 80px auto;"></div>
  <script type = "text/javascript" src = "https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true,
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {

      });
    });
  </script>
 </body>
</html>

<embed src = "data:application/pdf;base64,..."/>