Рано или поздно перед каждым разработчиком встает вопрос о печати страницы в красивом формате, будь то pdf или просто красивая печатная версия вашего сайта. Для этого вы можете использовать html2pdf, например. Но эта бибилиотека поддерживает только вебкит. Что же делать с FF и IE? Нужен более универсальный способ печати, кроме того, есть ряд задач.
- Печать всей страницы целиком;
- Печать части страницы (без футера и шапки, например);
- Максимально кроссбраузерно и просто.
В этот момент можно как раз вспомнить о canvas и попробовать создать изображение нашей страницы и отправить на печать именно его. Не знаю на сколько этот способ прост, но мне он показался наименее сложным в реализации.
Нам понадобятся:
- html2canvas — библиотека от Niklas von Hertzen;
- jQuery и совсем немного навтиного js.
Начать стоит с генерации canvas, все просто:
function renderPrintVersion() {
html2canvas(document.body, { // рендеим body по умолчанию
onrendered: function(canvas) {
document.body.appendChild(canvas); // вставляем перед </body>
}
});
}
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);
}
});
В результате работы вы получите красивую печатную версию вашего сайта, в которой нет места экономии чернил, но, тем не менее, она будет отлично смотреться на листке бумаги и будет иметь узнаваемый дизайн вашего продукта.
Автор: mrTyler
