Отображение PDF в веб-браузере

Как я могу отобразить PDF-файл в веб-браузере на странице .html?

Я использую встраиваемую программу просмотра PDF-файлов Google Docs. Документы не нужно загружать в Google Docs, но они должны быть доступны в Интернете.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

вместо использования iframe и в зависимости от сторонних разработчиков подумайте об использовании flexpaper или pdf.js.

Я использовал PDF.js , у меня он отлично работает. Вот демо .

предпочтительно с использованием тега объекта

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

обратите внимание, что вы можете изменить ширину и высоту на любое значение, которое вы посетите http://www.w3schools.com/tags/tag_object.asp

Самый простой способ - создать iframe и указать в качестве источника URL-адрес PDF-файла.

(уклоняется от сумасшедших HTML-дизайнеров) Сделал сам, отлично работает, кроссбраузерность (залезает в бункер).

Плагин браузера контролирует эти настройки, поэтому вы не можете его принудительно использовать. Однако <a href="whatver.pdf">вместо <a href="whatever.pdf" target="_blank">.

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

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Для абсолютных путей двигатели будут идти к U nified R esource L ocator и открыть их. Итак, подавите целевой атрибут.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Браузеры отлично справятся в обоих случаях.

Вы также можете встроить, используя JavaScript, через стороннее решение, такое как PDFObject .

Вы можете использовать этот код:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Или используйте встраиваемую программу просмотра PDF-файлов Google Docs:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

Вы также можете использовать этот простой подход GoogleDoc.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

Это создаст новую страницу для просмотра документа без искажения потока.

Простое решение - поместить его в iframe и надеяться, что у пользователя есть подключаемый модуль, который его поддерживает.

(Я не знаю, плагин Acrobat был настолько ресурсоемким и источником нестабильности, что я стараюсь удалить его из любого браузера, которого он касается).

Сложное, но относительно популярное решение - отобразить его во флэш-апплете.

Мы визуализируем страницы файлов PDF как файлы PNG на сервере с помощью JPedal (библиотеки java). Это, в сочетании с некоторым javascript, дает нам высокий контроль над визуализацией и навигацией.

Недавно мне потребовалось предоставить более удобную для мобильных устройств и адаптивную версию документа .pdf, потому что на узких экранах телефона требовалось много прокручивать вправо и влево. Чтобы разрешить только вертикальную прокрутку и избежать горизонтальной прокрутки, у меня сработали следующие шаги:

• Откройте .pdf в браузере Chrome.
• Нажмите "Открыть в Google Документах".
• Щелкните Файл> Загрузить> Веб-страница.
• Щелкните загруженный документ, чтобы распаковать его.
• Нажмите на распакованный HTML-документ, чтобы открыть его в браузере Chrome.
• Нажмите fn F12, чтобы открыть Chrome Dev Tools.
• Вставьте копию (document.documentElement.outerHTML.replace (/ padding: 72pt 72pt 72pt 72pt; /, '') .replace (/ margin-right:. *? Pt / g, '')) в консоль и нажмите Enter. скопировать измененный документ в буфер обмена
• Откройте текстовый редактор (например, Блокнот) или, в моем случае, VSCode, вставьте и сохраните с расширением .html.

Результат выглядел хорошо, и его можно было использовать как в настольной, так и в мобильной среде.

Отображение содержимого, сохраненного в формате PDF / DOC / DOCX, идеально подходит для отображения файла pdf / doc / docx на вашей веб-странице

Вы пробовали использовать простой тег img?

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">