<input class="a4to1" type="text"/><br>
<input class="a4to2" type="text"/>
<button id='print'>Печать</button>


<div id="a4" class="a4">
  <div class="a4wrap1">
    
  </div>
  <div class="a4wrap2">
    
  </div>
</div>
.a4{
  text-align:center;
  position:relative;
  left:10px;
  width:877px;
  height:620px;
  border:1px solid #000;
  display:block;
}
input{
  margin:10px;
  width:250px;
  height:70px;
  font-size:40px;
}
.a4wrap1{
  position:relative;
  width:877px;
  height:310px;
  border:1px solid #000;
  font-size:250px;
  font-family:tahoma;
}
.a4wrap2{
  position:relative;
  width:877px;
  height:310px;
  border:1px solid #000;
  font-size:250px;
  font-family:tahoma;
}
#print_frame{
    display: none;
}

@media print {
    /* здесь будут стили для печати */
.a4{
  text-align:center;
  position:relative;
  left:10px;
  width:877px;
  height:620px;
  border:1px solid #000;
  display:block;
}
.a4wrap1{
  position:relative;
  width:877px;
  height:310px;
  border:1px solid #000;
  font-size:250px;
  font-family:tahoma;
}
.a4wrap2{
  position:relative;
  width:877px;
  height:310px;
  border:1px solid #000;
  font-size:250px;
  font-family:tahoma;
}
}
$(function (){ 
    $('.a4to1').keyup(function(){
       var text = $('.a4to1').val(); 
       $('.a4wrap1').text(text);
    });
});

$(function (){ 
    $('.a4to2').keyup(function(){
       var text = $('.a4to2').val(); 
       $('.a4wrap2').text(text);
    });
});

$("#btn").on('click', function () {
    $("#a4").printPage();
});

//Распечатка

$(function(){
    $('#print').click(function(){
        var printing_css='<style media=print>tr:nth-child(even) td{background: #000;} .a4{text-align:center;position:relative;left:10px;width:877px;height:620px;border:1px solid #000;display:block;} .a4wrap1{position:relative;width:877px;height:310px;border:1px solid #000;font-size:250px;font-family:tahoma;}.a4wrap2{position:relative;width:877px;height:310px;border:1px solid #000;font-size:250px;font-family:tahoma;}</style>';
        var html_to_print=printing_css+$('#a4').html();
        var iframe=$('<iframe id="print_frame">');
        $('body').append(iframe);
        var doc = $('#print_frame')[0].contentDocument || $('#print_frame')[0].contentWindow.document;
        var win = $('#print_frame')[0].contentWindow || $('#print_frame')[0];
        doc.getElementsByTagName('body')[0].innerHTML=html_to_print;
        win.print();
        $('iframe').remove();
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js