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

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

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

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

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

Обновление (1/2018):

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

Вы также можете использовать но для этой цели. Насколько я знаю, это's не официальный Google есть (я ошибаюсь?), но это работает для меня очень хорошо и гладко. Вам нужно загрузить свой PDF-файл где-то раньше и просто использовать URL-адрес:

Важно то, что он не'т нужен флеш-плеер, он использует JavaScript.

У вас есть некоторый контроль над тем, как PDF отображается в браузере, передав некоторые параметры в строке запроса. Я был рад этой работе, пока я не поняла, что это не работает в IE8. :(

Это работает в Chrome 9 и выше, Firefox 3.6, но в IE8 он показывает сообщение, что "вставьте здесь ваше сообщение об ошибке, если PDF не отображается.&и"

Я не'т еще тестировали старые версии любой из вышеперечисленных браузеров, хотя. Но здесь'ы код я в любом случае в случае, если это помогает никому. Это задает масштаб до 85%, убирает полосы прокрутки, панели инструментов и панели навигации. Я'будете обновлять свой пост, если я сталкиваюсь то, что работает в IE, а также.

    <p>Insert your error message here, if the PDF cannot be displayed.</p>

Используя как в <Объект> В и в <размещения> даст вам более широкий размах совместимости браузера.

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

Конвертировать его в PNG с помощью ImageMagick, и отображения ПНГ (быстрый и грязный).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '';
?>

Это хороший вариант, если вам нужно быстрое решение, хотите избежать кросс-браузер проблемы с PDF просмотр, и если PDF-это только страница или две. Конечно, вам нужно установить утилиты (которая в свою очередь нуждается в Ghostscript) на вашем веб-сервере, который не может быть доступен на условиях хостинга. Также существует плагин для PHP (называется imagick), которая работает такой но это'собственные специальные требования.

Взгляните на этот код - для размещения в формате PDF в HTML

    <a href="YourFile.pdf">shree</a> 

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

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

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

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

Сначала мы пробовали PDF.jS. Он работал с base64 в средстве просмотра для Firefox и Chrome. Однако, он был недопустимо медленным в нашем PDF. Т. е./края не'т работать на всех.

Поэтому мы попробовали его с строку base64 в HTML-тега Object. Это снова я't работа для IE/края (возможно с той же проблемой, с PDF.js). В Chrome/Firefox/сафари снова без проблем. Что's, почему мы выбрали гибридное решение. Т. е./Edge мы использовать iframe и для всех остальных браузеров объект-метку. <БР/><БР/> Решение Ифрейме, конечно, работать на Хром и Колорадо. Причина, почему мы не'т использовать этот раствор для Chrome заключается в том, что хотя документ PDF отображался правильно, хром делает новый запрос к серверу, как только вы нажмете на "загрузить" в предварительный просмотр. Необходимые скрытые поля pdfHelperTransferData (для передачи данных формы, необходимой для генерации PDF) уже не установить, потому что PDF-файл будет отображаться в iframe. За эту особенность/баг вижу https://stackoverflow.com/questions/32725608/chrome-sends-two-requests-when-downloading-a-pdf-and-cancels-one-of-them.

Сейчас проблема детей в 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">

        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />

</div>

<div id="pdf-wrapper" class="modal-content">


</div>

Для проверки типа браузера для IE/края смотрите здесь: как я могу обнаружить Интернет Эксплорер (IE) и Microsoft край с помощью JavaScript?]2 я надеюсь, что эти находки будут экономить чужое время.

1. Создайте контейнер для хранения ваших файлов PDF

<див ИД="по пример1" и></див>

2. Скажи PDFObject, который в формате PDF для размещения, и куда вставлять его

<скрипт СРЦ=" по - /Яш/pdfobject.Яш" и></скрипт> <сценарий>PDFObject.добавьте(" в/формате PDF/образец-3pp.PDF файл" и " Ну#пример1-то");</скрипт>

3. При желании вы можете использовать CSS, чтобы задать визуальный стиль, включая размеры, границы, отступы и т. д.

<стиль и GT; .pdfobject-контейнер { высота: 500 пикселей;} .pdfobject { границы: 1px твердых #666; } </стиль и GT;

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

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

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

Вы можете использовать относительное расположение Сохранить PDF-файл такой:

Пример1

Пример 2

в <элемент iframe в src="в пример.PDF файл" в стиль"по ширине:1000пк; высота:800 пикселей; и" frameborder="в 0" и свойства allowfullscreen></iframe из>

PdfToImageServlet используя ImageMagick'с командой Convert.

Пример использования: <ИМГ src=&#39;/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf&#39;>

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

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

Чтобы передать файл в браузер, смотрите вопрос Stack Overflow How to stream a PDF file as binary to the browser using .NET 2.0 - обратите внимание, что, с небольшими изменениями, это должно работать независимо от того, передаете ли вы файл из файловой системы или динамически сгенерированный.

С учетом этого, в статье MSDN, на которую дана ссылка, довольно упрощенный взгляд на мир, поэтому вам стоит прочитать Successfully Stream a PDF to browser through HTTPS, чтобы узнать о некоторых заголовках, которые вам могут понадобиться.

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

Это так, как я сделал с Аксиос и 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:

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

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

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

Теперь ФФ, хром, ИЕ 11, а края все отображать PDF в окне просмотра отображается в iframe прошли через стандартный URI Blob в URL-адрес.

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

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

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