<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();
});
});
This Pen doesn't use any external CSS resources.