Эффективная печать PDF в JavaScript

Прямая печать PDF-файлов из веб-браузера с помощью JavaScript не является простой задачей из-за несоответствий в браузерах и соображений безопасности. Тем не менее, существует несколько методов, которые эффективно запускают диалоговое окно печати браузера для PDF-файлов. В этой статье рассматриваются два популярных метода: использование iframe и библиотеки Print.js.

Оглавление

• Печать PDF-файлов с помощью тега iframe
• Печать PDF-файлов с помощью библиотеки Print.js
• Выбор подходящего метода

Печать PDF-файлов с помощью тега iframe

Этот подход прост и не требует внешних библиотек. Он встраивает PDF-файл в iframe, а затем запускает печать из контекста iframe.

Реализация:

1. Встраивание PDF-файла: Используйте тег <iframe>, установив его атрибут src в URL PDF-файла и скрыв его с помощью CSS:

<iframe id="pdf-iframe" src="ваш-pdf-файл.pdf" style="display: none;"></iframe>

2. Запуск печати: Используйте JavaScript для доступа к окну содержимого iframe и вызова его метода print():

function printPdf() {
  const iframe = document.getElementById('pdf-iframe');
  if (iframe.contentWindow) { // Проверка существования contentWindow для предотвращения ошибок
    iframe.contentWindow.focus(); // Убедитесь, что iframe находится в фокусе перед печатью
    iframe.contentWindow.print();
  } else {
    console.error("Ошибка: Не удалось получить доступ к окну содержимого iframe.");
  }
}

3. Добавление кнопки печати: Создайте кнопку, которая вызывает printPdf():

<button onclick="printPdf()">Распечатать PDF</button>

Ограничения:

• Совместимость браузеров: Надежность варьируется в зависимости от браузеров. Некоторые могут требовать взаимодействия пользователя или специальных разрешений.
• Ограниченный контроль: Минимальный контроль над диапазонами страниц или настройками печати.
• Безопасность: Встраивание PDF-файлов напрямую может представлять риски безопасности в зависимости от источника PDF-файла.

Печать PDF-файлов с помощью библиотеки Print.js

Print.js предлагает более надежное и функциональное решение, обрабатывающее несоответствия браузеров и обеспечивающее лучший контроль. Это легкая библиотека, легко интегрируемая в ваш проект.

Реализация:

1. Включение Print.js: Добавьте библиотеку Print.js в свой HTML, используя CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/print.js/1.6.2/print.min.js"></script>

2. Запуск печати: Используйте функцию printJS() из Print.js:

function printPdf() {
  printJS({
    printable: 'ваш-pdf-файл.pdf',
    type: 'pdf',
  });
}

3. Добавление кнопки печати (как и раньше):

<button onclick="printPdf()">Распечатать PDF</button>

Преимущества:

• Улучшенная совместимость браузеров: Эффективно обрабатывает межбраузерные различия.
• Больший контроль: Предлагает некоторые параметры настройки по сравнению с методом iframe.
• Проще в использовании: Более простой и интуитивно понятный API.

Выбор подходящего метода

Метод iframe проще, но менее надежен и обеспечивает меньший контроль. Print.js предлагает более надежное, функциональное и простое в использовании решение, но требует добавления внешней библиотеки. Лучший выбор зависит от потребностей вашего проекта, с приоритетом таких факторов, как простота реализации, необходимый контроль и совместимость браузеров.