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

это быстро, легко, к месту и не требует каких-либо сторонних скриптов:

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

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

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

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

дополнительные сведения см. В разделе Инструменты Разработчика.

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/

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

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

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

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

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

Сначала мы попробовали с PDF.JS из-за предложения @lubos hasko: нам удалось использовать Base64 со зрителем. Это работало в Firefox и Chrome. Но все равно очень медленно. IE / Edge не работал вообще для США.

отображение строки PDF-Base64 в объектном теге не работало для нас в браузере Microsoft (IE/Edge), но очень хорошо в Chrome/Firefox / Safari. Поэтому для IE11/Edge мы использовали IFrame для отображения потока PDF. Оно работает хорошо и усилие обслуживания сдержано в пределах. Для IE9 / IE10 мы просто отправляем файл в виде потока загрузки, потому что он не очень хорошо работает с этими браузерами в сочетании с iframe. У пользователя нет роскоши показывать pdf в modal-box-предварительный просмотр, который подходит для количества наших клиентов, которые используют эти браузеры (около 1%). Вы можете найти наше решение для загрузки здесь:Скачать PDF без обновления с IFrame.

причина, по которой мы не используем решение IFrame для всех браузеров, заключается в том, что, хотя PDF отображается правильно во всех наших проверенных браузерах, Chrome делает еще один запрос к функции сервера, как только вы хотите загрузить PDF в Chrome-PDF Reader. Этот скрытое поле pdfHelperTransferData больше не задано, потому что PDF отображается в IFrame, поэтому параметр в серверной функции null. Для этой "функции / ошибки" см. Это Chrome отправляет два запроса при загрузке PDF (и отменяет один из них).

Наш Javascript

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>

чтобы проверить наличие Microsoft-Browser см., Например:как я могу обнаружить Internet Explorer (IE) и Microsoft Edge с использованием JavaScript? Я надеюсь, что эти результаты сэкономят кому-то еще некоторое время.

PdfToImageServlet используя ImageMagick в .

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

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

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

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

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, переданном через стандартный URI blob в URL.

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

это то, как я сделал с 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 в изображение, перейдите вhttps://www.base64-image.de Поместите изображение внутри, и он преобразует его в base64 для вас. Затем поместите код в тег изображения.

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

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