We are facing the problem to print the full textarea text
when using the default browser print. It will print the full content of the
pages which will print only that text which is visible to the textarea.
Content which is not displaying or go out of page due to
overflow. Please use below code to see that.
We are having the Textarea and div control and when we click
on the print then it will hide the text area and put the Textarea text to div
|
<textarea name="textarea" wrap="wrap" id="the_textarea">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nulla tincidunt congue cursus. Nunc
nibh augue, bibendum et interdum sed, gravida sit amet nisi. Pellentesque
lacinia leo ut nibh pretium sed dapibus
tellus varius. In
sit amet turpis purus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Praesent lacinia odio ut tellus
elementum ut lacinia lectus aliquam.
Etiam fringilla
velit nec ligula elementum tincidunt. Sed eu neque a odio scelerisque
ullamcorper id sed lorem. Sed non leo arcu. Aliquam id metus tellus, pharetra
scelerisque tortor. Quisque tellus lorem,
rutrum a suscipit
at, vestibulum nec eros. Nulla fringilla hendrerit orci, non molestie eros
mollis nec. Proin porttitor, velit eget hendrerit sollicitudin, quam leo
dictum sapien, sed tincidunt eros ante ut augue.
Praesent id nisl non
risus mattis interdum vitae in ligula. Vivamus porta tellus a felis egestas
eu eleifend nisi posuere. Vivamus pharetra fringilla pulvinar. Suspendisse
eget ante vel dolor porttitor euismod.
Integer sodales urna
eget nisi porttitor sodales. Nullam laoreet lectus id sem tempus bibendum.
Last line of
textarea
</textarea>
<div id="print_helper"></div>
|
Code which will copy the text from textarea to div will be
as below
|
jQuery(function($){
function copy_to_print_helper(){
$('#print_helper').text($('#the_textarea').val());
}
$('#the_textarea').bind('keydown keyup
keypress cut copy past blur change', function(){
copy_to_print_helper();
});
copy_to_print_helper();
});
|
Code for printing the text by getting all the text of
text area.
|
$(function() {
var buttons = $('button');
var printStyle = $('#print');
var style;
buttons.click(function() {
style = 'p { color: ' + $(this).attr('class') + '};';
printStyle.text(style);
window.print();
});
});
|
We are full code for printing the full text of textarea
content into print as below.
|
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Printing of text area</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel=stylesheet href="https://alanhogan.github.io/web-experiments/generic.css" />
<style type="text/css" media="all">
/* Styles for all media */
#print_helper {
display: none;
}
.important {
color: #330;
background: #ffd;
border: 2px solid #dd4;
padding: 1em;
margin: 1em 0;
}
.important a:link,
.important a:visited {
color: #591;
}
</style>
<style type="text/css" media="print">
/* Styles for print */
#print_helper {
display: block;
overflow: visible;
font-family: Menlo, "Deja Vu Sans
Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
white-space: pre;
white-space: pre-wrap;
}
#the_textarea {
display: none;
}
#print_placeholder:after {
content: "The print stylesheet has been applied.
?";
display: inline;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function copy_to_print_helper(){
$('#print_helper').text($('#the_textarea').val());
}
$('#the_textarea').bind('keydown keyup
keypress cut copy past blur change', function(){
copy_to_print_helper();
});
copy_to_print_helper();
});
$(function() {
var buttons = $('button');
var printStyle = $('#print');
var style;
buttons.click(function() {
style = 'p { color: ' + $(this).attr('class') + '};';
printStyle.text(style);
window.print();
});
});
</script>
</head>
<body>
<div>
<button>print this page</button>
</div>
<textarea name="textarea" wrap="wrap" id="the_textarea" style="width:400px;height:150px">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nulla tincidunt congue cursus. Nunc
nibh augue, bibendum et interdum sed, gravida sit amet nisi. Pellentesque
lacinia leo ut nibh pretium sed dapibus
tellus varius. In
sit amet turpis purus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Praesent lacinia odio ut tellus
elementum ut lacinia lectus aliquam.
Etiam fringilla
velit nec ligula elementum tincidunt. Sed eu neque a odio scelerisque
ullamcorper id sed lorem. Sed non leo arcu. Aliquam id metus tellus, pharetra
scelerisque tortor. Quisque tellus lorem,
rutrum a suscipit
at, vestibulum nec eros. Nulla fringilla hendrerit orci, non molestie eros
mollis nec. Proin porttitor, velit eget hendrerit sollicitudin, quam leo
dictum sapien, sed tincidunt eros ante ut augue.
Praesent id nisl non
risus mattis interdum vitae in ligula. Vivamus porta tellus a felis egestas
eu eleifend nisi posuere. Vivamus pharetra fringilla pulvinar. Suspendisse
eget ante vel dolor porttitor euismod.
Integer sodales urna
eget nisi porttitor sodales. Nullam laoreet lectus id sem tempus bibendum.
Last line of
textarea
</textarea>
<div id="print_helper"></div>
</body>
</html>
|
Now you can see the output in the print preview as like
below. It is displaying all the textarea content into print preview.
No comments:
Post a Comment