Вы когда-нибудь задумывались, можем ли мы напечатать почти файл любого формата с помощью нашего JS-кода.
Мы можем не только распечатать, но и объединить несколько PDF-файлов и сохранить их в один PDF-файл.
Для решения этой задачи нам понадобятся две библиотеки JS:
- Print.js: https://printjs.crabbly.com/
- PDF.js: https://mozilla.github.io/pdf.js/
Сначала добавьте CDN обеих библиотек в файл index.html.
Мы выполним печать в разных категориях:
- Распечатать один файл PDF
- Печать нескольких изображений
- Распечатать HTML-контент
- Объедините разные 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 и выполнить действие в соответствии с требованием. Чтобы узнать больше, следуйте их документации.
Ссылка:
- Print.js: https://printjs.crabbly.com/
- PDF.js: https://mozilla.github.io/pdf.js/