Печать на Javascript
Javascript

Печать на Javascript

Когда-то мы уже разбирались с возможностью распечатать div на Javascript. Кстати, если сломался принтер, то можно обратится в ремонт принтеров hp. Сегодня я расскажу о системе, которая может сделать печать на Javascript волшебно и просто.

Речь идет о print.js

Print.js – это система, которая позволяет вывести на печать всё, что угодно. И это действительно так.

Печать PDF: print.js позволяет напечатать PDF файл прямо по ссылке, то есть не нужно придумывать как открыть PDF для печати, система сама всё сделает, а вам просто нужно будет вызвать команду:

printJS('docs/printjs.pdf')

Перед пользователем же появится стандартный диалог печати, содержащий указанный PDF файл.

В чем здесь преимущество? В том, что на чистом JS без таких вот библиотек, печатать PDF вообще не представлялось возможным. Здесь же это делается одной строчкой кода.

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

Печать HTML: с помощью этого модуля можно распечатать любой блок HTML кода. Например, можно распечатать div, таблицу, страницу, форму.

printJS('printJS-div', 'html')

Строчка выше распечатает <div id=»printJS-div»>…</div>.

Также эта функция принимает различные параметры, как например, заголовок печатаемого документа.

printJS({ printable: 'printJS-вшм', type: 'html', header: 'Заголовок документа для печати' })

Печать картинок: также эта библиотека способна печатать одну или несколько картинок, без особых трудностей и сложностей. Одну или несколько, и прямо указывая ссылку на картинку (это в дополнение к печать картинок в блоке HTML).

 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Несколько картинок',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

Как видите, можно указать ещё и стили картинок.

Печать JSON: Это одна из особенностей этой библиотеки. Есть возможность распечатать данные в формате JSON в виде таблицы.

Например, у вас есть JSON:

someJSONdata = [
    {
       name: 'John Doe',
       email: 'john@doe.com',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: 'barry@flash.com',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: 'cool@dude.com',
       phone: '333-333-3333'
    }
 ]

Можно вызвать команду печати:

printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})

И система выведет на печать аккуратную таблицу построенную из данные в JSON. Также можно задать стили таблицы отдельным параметром.

Установка

Остановка очень простая. В зависимости от выбранного способа интеграции JS библиотек это может быть и подключение скрипта из CDN (библиотека доступна в KeyCDN), а можно подключить через npm:

  npm install print-js --save

и затем импортировать её в своём приложении:

import print from 'print-js'

На этом всё, на сайте библиотеки есть большое количество документации и инструкций использования.


Также рекомендуем: