Встраивание PDF в веб-страницу HTML: решение для браузеров

Быстрый ответ

Если на вашем сайте необходимо представить PDF, неплохим вариантом будет использование тега HTML <embed>. Атрибут src должен содержать ссылку на ваш PDF-файл, как показано ниже:

<embed src="имя-файла-PDF.pdf" type="application/pdf" width="600" height="400">

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

Если ваш PDF-файл опубликован в сети, вы можете воспользоваться PDF-просмотрщиком Google Docs, поместив ссылку на PDF в <iframe>:

<iframe src="http://docs.google.com/gview?embedded=true&url=http://www.publicinternet/vash-publichnyy-PDF.pdf" style="width:600px; height:500px;" frameborder="0"></iframe>

Таким способом PDF-документ будет доступен для чтения в любом браузере независимо от версий браузеров или плагинов.

Согласованность в отображении PDF для всех пользователей

Карта <object> в кармане

Если необходим узкоспециализированный контроль и есть потребность в резервном контенте, на помощь придет тег <object>:

<object data="foo.pdf" type="application/pdf" width="600" height="400">
  <p>К сожалению, ваш браузер не поддерживает отображение PDF. <a href="foo.pdf">Загрузите документ, кликнув здесь.</a></p>
</object>

Атрибут type="application/pdf" задает необходимые параметры для отображения PDF-документа.

Подробнее об этом расскажет наш спикер на видео

Обслуживание всех устройств

Удобный просмотр PDF должен быть обеспечен на любом устройстве:

• Используйте <embed> или <object> для непрерывного отображения на настольных компьютерах.

• Предложите ссылку на скачивание тем, кто предпочитает взаимодействовать с PDF иначе:

  HTML

  Скопировать код

  <a href="foobar.pdf">Скачать PDF</a>

  Запустить код

• Для расширенных функций, например, поиска, масштабирования или подсветки текста, воспользуйтесь преимуществами PDF.js.

PDF.js: поднимаем уровень ваших PDF

Для особо требовательных пользователей:

• Ознакомьтесь с PDF.js для отличного качества отображения PDF.

• Основной пример использования:

  HTML

  Скопировать код

  <canvas id="pdf-canvas"></canvas>
  <!-- Волшебство PDF.js начинается тут -->
  <script src="pdf.js"></script>
  <script>
    PDFJS.getDocument('имя-PG-рейтингового-PDF-файла.pdf').then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        var canvas = document.getElementById('pdf-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
  
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  </script>

  Запустить код

С помощью PDF.js ваши документы будут отражены в браузере в лучшем виде.

Визуализация

Понимание встраивания на примере галереи 🖼️

Можно воспринимать веб-браузер (🌐) как галерею, а PDF-файл как картину (🖼️).

<iframe> — это "рамка", в которой "картина" представлена зрителям.

<iframe src="masterpiece.pdf" style="width:600px; height:500px;"></iframe>

Таким образом, картина (🖼️) демонстрируется в нашей виртуальной галерее (🌐).

Советы по совместимости с различными устройствами

• Проверьте совместимость выбранных вами методов встраивания с мобильными устройствами, так как <iframe> или <embed> могут не всегда корректно работать.
• Используйте адаптивный CSS для оптимизации размеров PDF-документа и обеспечения удобного просмотра на всех экранах.
• Рассмотрите альтернативные варианты просмотрщиков PDF, такие как FlexPaper или PDFObject, если у вас есть специфические требования.

Преодоление эстетических ограничений

• Стилизуйте <iframe>, <embed> или <object> с помощью CSS, чтобы они гармонично вписывались в дизайн вашего сайта.
• Найдите оптимальный размер для просмотрщика PDF, чтобы избежать необходимости прокрутки.
• Если PDF является ключевым элементом страницы, подумайте о использовании модального окна или открытии документа в новой вкладке для полноценного просмотра.

Полезные материалы

1. <embed>: Элемент для встраивания внешнего контента — документация по использованию <embed> для интеграции PDF в HTML на MDN.
2. GitHub – mozilla/pdf.js: PDF-читалка на JavaScript — информация о проекте PDF.js от Mozilla, который улучшает взаимодействие с PDF в интернете через HTML5.
3. HTML-тег object — руководство W3Schools по использованию <object> для встраивания PDF.
4. Каков наилучший способ встраивания PDF в HTML? – Stack Overflow — множество советов и примеров встраивания PDF на веб-страницу из сообщества разработчиков.
5. HTML-тег iframe — документация по <iframe> от W3Schools.
6. PDFObject: JavaScript-утилита для встраивания PDF — JavaScript-библиотека, простая в использовании, для вывода PDF в интернете.