Вы когда-нибудь задумывались, можем ли мы напечатать почти файл любого формата с помощью нашего JS-кода.

Мы можем не только распечатать, но и объединить несколько PDF-файлов и сохранить их в один PDF-файл.

Для решения этой задачи нам понадобятся две библиотеки JS:

  1. Print.js: https://printjs.crabbly.com/
  2. PDF.js: https://mozilla.github.io/pdf.js/

Сначала добавьте CDN обеих библиотек в файл index.html.

Мы выполним печать в разных категориях:

  1. Распечатать один файл PDF
  2. Печать нескольких изображений
  3. Распечатать HTML-контент
  4. Объедините разные PDF-файлы и сохраните или распечатайте как один PDF-файл.

Печать одного файла PDF

Для печати одного файла PDF. Нам не нужен PDF.js. Это можно сделать с помощью Print.js, т.е. мы можем использовать глобальный метод «printJS», который может принимать URL-адрес файла PDF или данные PDF base64.

Печать нескольких изображений

Распечатать несколько изображений с помощью Print.js очень просто. Все, что вам нужно сделать, это передать URL-адреса вашего файла изображения в ключе printable в массиве в методе printJS.

Печать содержимого HTML

Для печати HTML-контента все, что вам нужно, это действительный HTML-код и передать его в метод printJS.

Объединить разные PDF-файлы и сохранить или распечатать как один PDF-файл

Теперь самое интересное: объединить несколько файлов PDF, а затем предоставить возможность сохранить или распечатать один файл. Нам нужен PDF.js, чтобы преобразовать несколько файлов base64 PDF в несколько файлов base64 PNG. Повторяйте все файлы PDF в формате base64 и постоянно добавляйте в одну переменную несколько файлов PNG в формате base64.

На данный момент у нас есть все наши файлы base64 PNG. Теперь осталось только объединить их и сохранить или распечатать как один PDF-файл. С помощью PDF.js здесь, т. е. визуализировать несколько файлов base64 PNG в теге изображения в одном файле HTML и распечатать его в одном один PDF-файл. Когда откроется всплывающее окно печати, мы можем просто распечатать или сохранить файл PDF.

Мы можем проверить, как мы можем добиться результатов для всех вышеперечисленных категорий, черезhttps://stackblitz.com/edit/js-yp4nmr?file=index.html

Так что это одна из немногих вещей, которых мы можем достичь с помощью этих двух библиотек. Мы даже можем печатать данные Json или рендерить несколько страниц несколько PDF-файлов независимо друг от друга для преобразования каждой страницы PDF в PNG и выполнить действие в соответствии с требованием. Чтобы узнать больше, следуйте их документации.

Ссылка:

  1. Print.js: https://printjs.crabbly.com/
  2. PDF.js: https://mozilla.github.io/pdf.js/