Каков рекомендуемый способ встраивания PDF в HTML?
- плавающий фрейм?
- Object?
- Вставить?
Что скажет сам Adobe об этом?
В моем случае PDF создается "на лету", поэтому он не может быть загружен в стороннее решение до его очистки.
Каков рекомендуемый способ встраивания PDF в HTML?
Что скажет сам Adobe об этом?
В моем случае PDF создается "на лету", поэтому он не может быть загружен в стороннее решение до его очистки.
Вероятно, лучший подход - использовать библиотеку PDF.JS. Это чистый HTML5/JavaScript renderer для PDF без каких-либо сторонних плагинов.
Онлайн-демо: http://mozilla.github.com/pdf.js/web/viewer.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-плеер, он использует 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-просмотра.
Но для простых документов 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
<div id="example1"></div>
Укажите PDFObject, какой PDF файл вставлять и где его встраивать
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
При желании вы можете использовать CSS для указания визуального стиля, включая размеры, границы, поля и т.д.
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
источник: https://pdfobject.com/
Scribd больше не требует, чтобы вы размещали документы на своем сервере. Если вы создаете учетную запись с ними, чтобы получить идентификатор издателя. Для загрузки файлов PDF, хранящихся на вашем собственном сервере, требуется всего несколько строк кода JavaScript.
Подробнее см. Инструменты разработчика.
Один из вариантов, который вы должны рассмотреть, - Известный 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>
PdfToImageServlet с помощью команды ImageMagick convert
.
Пример использования:
<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>
Вы можете использовать относительное местоположение сохраненного PDF файла следующим образом:
Example1
<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 в виде двоичного кода в браузер с помощью .NET 2.0 - обратите внимание, что с незначительными вариации, это должно работать независимо от того, подаете ли вы файл из файловой системы или динамически генерируете.
С учетом сказанного ссылка на статью MSDN занимает довольно упрощенное представление о мире, поэтому вы можете прочитать Успешно передать PDF в браузер через HTTPS, а также для некоторых заголовков, которые вам могут потребоваться.
Используя этот подход, iframe, вероятно, лучший способ. У вас есть одна веб-форма, которая передает этот файл, а затем помещает iframe на другую страницу с атрибутом src
, установленным в первую форму.
Так я сделал с 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>
URI для iframe должен выглядеть примерно так:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
Теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, передаваемом через стандартный URL-адрес blob в URL-адресе.
Как и многие замечательные ответы на этой странице, я также нашел PDFObject очень полезным... конечно же, стоит посмотреть.
Если вы не хотите размещать PDF.JS самостоятельно, вы можете попробовать DocDroid. Он похож на средство просмотра Google Диска PDF, но позволяет настраивать брендинг.
Если вы можете преобразовать свой pdf файл в изображение, перейдите на https://www.base64-image.de, разместите свое изображение внутри, и оно преобразует его в base64 для вас. Затем поместите код в тег изображения.
Вы должны сделать PDF, прежде чем показывать его.
Я нашел, что это работает отлично, и браузер обрабатывает его в firefox. Я не проверял IE...
<script>window.location='url'</script>