Вы находитесь здесь: Full stack разработка веб-приложений » JavaScript » Печать купона

Содержание

Печать купона

Печать только одного изображения со всей страницы на принтере (без media queries):

  • разметить HTML
  • добавить JavaScript
  • создать отдельную страницу печати

Разметка HTML

<img class="js-printed" src="/images/sample.jpg" width="960" height="600"  /> <!-- Что печатать -->
<a href="#" class="js-print">Распечатать купон</a> <!-- Кнопка печати -->

Javascript

print.js
initPrint($('.js-print'));
 
function initPrint($control) {
  if(!$control.length) return;
  $control.on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var $printed = $('.js-printed');
    if(!$printed.length) return;
 
    var ref = 'print.html?img=' + encodeURIComponent($printed.attr('src'));
    OpenInNewTab(ref);
  });
}
 
function OpenInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

Отдельная страница печати

print.html
<!DOCTYPE html>
<html lang="ru">
 
<head>
</head>
<style>
  img { width: 100%; height: auto; }
</style>
<body>
 
<script type="text/javascript">
 
var QueryString = function () {
  // This function is anonymous, is executed immediately and
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
      // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
      // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
      // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  }
    return query_string;
} ();
 
document.write('<img src="' + decodeURIComponent(QueryString.img) + '"');
window.print();
</script>
 
</body>
</html>

Ссылки

  • Версия для печати любого сайта Print friendly

Вы посетили: • Печать купона

Печать/экспорт