Отображение PDF в элементе Div - Django [дубликат]

Взгляните на этот код. Чтобы вставить 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>

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

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

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/

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

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

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

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

Так я сделал с 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>

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

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

Проблема для нас заключается в том, что мы не можем сохранять данные по юридическим причинам. Поэтому нам нужно работать с потоками и аналогичными, не сохраняя 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-файл в виде модального окна, который подходит для количества наших клиентов, которые используют эти браузеры (около 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-браузера для экземпляра: Как я могу обнаружить Internet Explorer (IE) и Microsoft Edge с помощью JavaScript? Я надеюсь, что эти результаты сохранят кто-то еще некоторое время.

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

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

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

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

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

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

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

UPDATE (1/2018):

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

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

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

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

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