[Из песочницы] Версия для печати — делаем красиво с помощью canvas и javascript17.10.2014 18:19

Рано или поздно перед каждым разработчиком встает вопрос о печати страницы в красивом формате, будь то pdf или просто красивая печатная версия вашего сайта. Для этого вы можете использовать html2pdf, например. Но эта бибилиотека поддерживает только вебкит. Что же делать с FF и IE? Нужен более универсальный способ печати, кроме того, есть ряд задач: Печать всей страницы целиком; Печать части страницы (без футера и шапки, например); Максимально кроссбраузерно и просто. В этот момент можно как раз вспомнить о canvas и попробовать создать изображение нашей страницы и отправить на печать именно его. Не знаю на сколько этот способ прост, но мне он показался наименее сложным в реализации.

Нам понадобятся:

Начать стоит с генерации canvas, все просто:

function renderPrintVersion () { html2canvas (document.body, { // рендеим body по умолчанию onrendered: function (canvas) { document.body.appendChild (canvas); // вставляем перед } }); }

setTimeout (function () { window.print (); // таймаут для отрисовки канваса }, 2000); }; }); Далее отправляем все это на печать:

// для windows все просто, достаточно отловить нужное сочетание клавиш jQuery (document).bind («keyup», function (e){ if (e.ctrlKey && e.keyCode == 80) { // console.log ('print ctrl + 80'); renderPrintVersion (); } });

// для маков все сложно, дело в том, что command не имеет свой keyCode, // ну или не откликается на 91/93 keyCode $(window).keydown (function (e) { if (e.keyCode >= 65 && e.keyCode == 80) { renderPrintVersion (); return false; // отменяем вызов окна печати по умолчанию } }) На этом этапе у вас уже будет рабочая версия формы печати, но она будет выводится вместе с вашей текущей html версией, нехорошо. Добавляем css для печатной версии:

@media print { canvas { /* в веб версии мы скрываем canvas и он присутствует в DOM. */ display: block; } .wrapper, footer, header { display: none; }

body { background-color: #fff; } } Но задача стоит другая — напечатать только часть страницы. Для этого (вы уже наверное все знаете) достаточно передать вместо document.body нужный вам id, например:

html2canvas (document.getElementById ('print-table-only'), { // печатаем только таблицу тарифов onrendered: function (canvas) { document.body.appendChild (canvas); } }); В результате работы вы получите красивую печатную версию вашего сайта, в которой нет места экономии чернил, но, тем не менее, она будет отлично смотреться на листке бумаги и будет иметь узнаваемый дизайн вашего продукта.