Версия для печати — делаем красиво с помощью canvas и javascript

Рано или поздно перед каждым разработчиком встает вопрос о печати страницы в красивом формате, будь то 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

Источник