do you know about this code :
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
Yes, I can help explain what that code does.
This is a JavaScript function that enables you to print a specific portion of the web page, which is identified by an id
value passed to the function as a parameter. Here’s how it works:
- The function first stores the current contents of the
body
element in a variable calledrestorepage
, using the jQueryhtml()
function. - It then clones the element with the
id
value passed as the function parameter (which is expected to be a portion of the page you want to print) and stores it in a variable calledprintcontent
. - Next, it empties the contents of the
body
element using the jQueryempty()
function and replaces it with theprintcontent
using the jQueryhtml()
function. - It then invokes the
window.print()
function, which displays the print dialog box to the user. - After printing, it restores the original contents of the
body
element using therestorepage
variable and sets the value of an element with theid
“text” to the value of a variableenteredtext
.
Overall, this function provides a way to print a specific portion of the web page while preserving the original content of the page.
this code not working on mobile phone browser. Possible to fix?
The code you provided may not work on some mobile browsers due to differences in browser behavior or limitations of the device. However, there are a few things you can try to make it work better on mobile devices:
- Ensure that jQuery is loaded correctly. The code you provided is using jQuery, so make sure it’s properly loaded on your web page.
- Use the
onbeforeprint
andonafterprint
events instead of thewindow.print()
function to trigger printing. Some mobile browsers don’t support thewindow.print()
function, but they may support these events.
Here’s an updated code that uses the onbeforeprint
and onafterprint
events:
javascript
function printContent(el) {
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.onbeforeprint = function() {
$('body').empty().html(printcontent);
}
window.onafterprint = function() {
$('body').html(restorepage);
$('#text').html(enteredtext);
}
window.print();
}
In this updated code, the onbeforeprint
event is used to set the content to be printed, and the onafterprint
event is used to restore the original content. The window.print()
function is called after the events are set. This approach may work better on mobile devices that don’t support the window.print()
function.
it’s work! but have some bug , text on input not print
If the text on the input is not being printed, it’s likely because you’re setting the value of the input element using the html()
function, which is used to set the HTML content of an element, but doesn’t work for input elements.
Instead, you can use the val()
function to set the value of the input element. Here’s an updated code that should work correctly:
javascript
function printContent(el) {
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.onbeforeprint = function() {
$('body').empty().html(printcontent);
$('#text').val(enteredtext);
}
window.onafterprint = function() {
$('body').html(restorepage);
$('#text').val(enteredtext);
}
window.print();
}
In this updated code, the val()
function is used to set the value of the input element. The onafterprint
event also sets the value of the input element to ensure it’s restored after printing. This should fix the issue you’re experiencing with the text not being printed.
working perfectly!!! your are genius!!
Thank you! I’m glad I could help you solve the issue. If you have any more questions or concerns, feel free to ask!