Рекомендуемый способ встраивания PDF в HTML?
Каков рекомендуемый способ встраивания PDF в HTML?
- плавающий фрейм?
- Объект?
- Встраивание?
Что Adobe говорит об этом сама?
В моем случае PDF-файл создается на лету, поэтому его нельзя загрузить в стороннее решение перед его очисткой.
32 ответа
Вероятно, лучший подход - использовать библиотеку PDF.JS. Это чистый HTML5/ JavaScript рендеринг для документов 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> will give you a wider breadth of browser compatibility.
<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 в 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>
Преобразуйте его в 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-файла следующим образом:
Example1
<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>
Example2
<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>
FDView объединяет PDF2SWF (который сам основан на xpdf) с программой просмотра SWF, поэтому вы можете конвертировать и вставлять документы PDF на лету на своем сервере.
xpdf не идеальный конвертер PDF. Если вам нужны лучшие результаты, Ghostview может конвертировать PDF-документы в другие форматы, для которых вам, возможно, будет проще создать Flash Viewer.
Но для простых документов 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.
Для получения дополнительной информации см. Инструменты разработчика.
Обновление — Adobe PDF Embed API
Adobe выпустила полностью бесплатный API Adobe PDF Embed .Поскольку они создали сам формат PDF, их API, вероятно, лучше всего подходит для этого.
- Он обеспечивает высочайшее качество рендеринга PDF.
- Вы можете полностью настроить пользовательский интерфейс и выбрать способ отображения PDF.
- У вас также будет аналитика использования PDF, чтобы вы могли понять, как пользователи взаимодействуют с PDF-файлами, включая время, проведенное на странице и поиск.
Все, что вам нужно сделать, это создать
Отображение PDF по
Вот пример фрагмента кода, который вы можете просто добавить в свой HTML и воспользоваться их API для отображения PDF с помощью
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
Отображение PDF в качестве буфера
Вот пример фрагмента кода, который вы можете просто добавить в свой HTML и воспользоваться их API для отображения PDF, если у вас есть буфер (например, локальный файл). Вы должны были бы добавить
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
Вот как я это сделал с 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>
PdfToImageServlet using ImageMagick's convert команда.
Пример использования:<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>
<object width="400" height="400" data="helloworld.pdf"></object>
Мне пришлось предварительно просмотреть 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>
Один из вариантов, который вы должны рассмотреть, это Известный PDF
У него есть бесплатный план, если вы не планируете проводить онлайн-сотрудничество в режиме реального времени в формате PDF.
Вставить следующее iframe на любой HTML и наслаждайтесь результатами:
<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
- Создайте блоб из входных PDF-байтов
- Используйте iframe и PDF.js, исправленные с помощью этого кросс-браузерного обходного пути
URI для iframe должен выглядеть примерно так:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
Теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, передаваемом через стандартный BLRI URI в URL.
Чтобы передать файл в браузер, см. Вопрос "Переполнение стека". Как передать файл PDF как двоичный файл в браузер с помощью.NET 2.0 - обратите внимание, что с небольшими изменениями это должно работать независимо от того, подаете ли вы файл из файловой системы. или динамически генерируется.
С учетом вышесказанного, в статье MSDN, на которую ссылаются, рассматривается довольно упрощенный взгляд на мир, поэтому вы можете прочитать " Успешно" Потоковая передача PDF в браузер через HTTPS, а также некоторые заголовки, которые вам, возможно, понадобятся.
Используя этот подход, iframe, вероятно, лучший путь. Иметь одну веб-форму для потоковой передачи файла, а затем поместить iframe на другую страницу со своим src Атрибут установлен на первую форму.
Я обнаружил, что лучший способ встроить PDF-файл для моего случая - использовать bootstrap, потому что он не только показывает 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>Я ответил на этот вопрос уже где-то в другом месте, однако я провел оценку между несколькими решениями. Также, если вы планируете коммерческое использование, это может быть полезно:
бесплатные решения
- iframe: Просто используйте iframe, однако это не то, что большинство людей ищет здесь.
- [Предварительный просмотр Документов Google] Документы Google имеют предварительный просмотр (см. другой ответ здесь)
- Pdf.js — это решение с открытым исходным кодом без внешних зависимостей.
- Adobe предлагает «бесплатный» PDF Embed API — рекомендуемый подход, если вас устраивает облачное решение.
Коммерческие поставщики
- Pdf.js Express — это коммерческое расширение Pdf.js (наихудший продукт, не дорогой)
- PSPDFKit - Провдер из Австрии с неплохой бизнес-поддержкой (умеренная цена, хороший продукт)
- Foxit — китайская компания, также предоставляющая веб-солтон в формате PDF. (самое дешевое коммерческое предложение)
- PDFTron — конкурент PSDPDFkit в США (более дорогой, но и не самый продвинутый)
Надеюсь это поможет. Я могу опубликовать более подробную информацию в блоге, если это поможет людям (дайте мне знать в комментариях).
Используйте собственное решение, если это возможно, это всегда лучшее решение, поскольку оно исходит из браузера (используяembedилиiframe), или вы можете использовать эту крошечную библиотеку, чтобы поддержать вас в этом: https://pdfobject.com
Большинство людей рекомендуют использовать известный PDF.JS. Он работал нормально, пока мне не понадобилось работать с ShadowDOM. Некоторые страницы пустые (белого цвета), некоторые черные без объяснения причин. Я не могу узнать, что происходит, и это в производстве :).
Раньше у меня возникла проблема со встраиванием base64, закодированного с помощью PDF, из-за ограничения URI, поэтому любые файлы размером более 2 МБ не будут правильно отображаться в Chrome.
Мое решение:
Создайте временную базу строки DOM на Blob.
const blob = dataURItoBlob(this.dataUrl);var temp_url = window.URL.createObjectURL(blob);Решите, где вы хотите прикрепить iframe к DOM:
const target = document.querySelector(targetID);target.innerHTML = `<iframe src='${temp_url}' type="application/pdf"></iframe>
Я не могу транслировать PDF-файлы в моем браузере с использованием тега embed, заполнив src URL-адресом. это просто работает с относительным расположением файла. эти ответы теперь работают. windows 10 amd64firefox 88.0.1 (64-разрядная версия)
Если вы не хотите размещать 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>
Если вы не хотите размещать PDF.JS самостоятельно, вы можете попробовать DocDroid. Это похоже на Google Drive PDF Viewer, но позволяет настраивать брендинг.
Современные сервисы или сценарии «скриншот полной страницы» в настоящее время способны создавать длинные скриншоты полных страниц HTML и PDF и преобразовывать их в файлы JPG или PNG, которые затем могут быть встроены как элемент img.
Просто используйте iFrame для PDF.
У меня были особые потребности в моем приложении React.js, я пробовал миллионы решений, но в итоге получил iFrame:) Удачи!