programming

Javascript: Πώς εκτυπώνουμε τα περιεχόμενα ενός Div

nc
Δημοσίευση: • Share Article:

@Στον παρακάτω κώδικα θα δούμε πώς μπορούμε να εκτυπώσουμε τα περιεχόμενα ενός div χρησιμοποιώντας javascript. Υπάρχει μία ενδιαφέρουσα μέθοδος στη JavaScript που ονομάζεται print(). Είναι μία από τις μεθόδους του αντικειμένου "Window" και χρησιμοποιείται για την ενεργοποίηση της δυνατότητας εκτύπωσης. Σε περίπτωση που θέλετε να εκτυπώσετε μέρος μιας περιοχής σελίδας, η απλή λύση είναι να τοποθετήσετε όλο το εκτυπώσιμο περιεχόμενο μέσα σε ένα μπλοκ «div» και να καλέσετε την μέθοδος εκτύπωσης με κάποιο συμβάν χρήστη. Ας δούμε πώς να το κάνουμε. Ας δημιουργήσουμε πρώτα ένα div το οποίο θα κρατήσει το εκτυπώσιμο τμήμα.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Part of a Webpage with JavaScript</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
    <div id="printableDiv" class="jumbotron">
        <h2>Test Printing</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    </div>
</div>
</body>
</html>
</code></pre>

<p>Εδώ δημιουργήσαμε ένα div με αναγνωριστικό #printableDiv και τοποθετήσαμε ένα κείμενο. Αυτό είναι το μπλοκ που πρέπει να εκτυπώσουμε. Στη συνέχεια, προσθέτουμε ένα στοιχείο κουμπιού για να ενεργοποιήσετε την ενέργεια εκτύπωσης όταν ο χρήστης κάνει κλικ σε αυτό.</p>

<pre><code class="language-markup line-numbers"><button type="button" class="btn btn-warning btn-lg" onclick="printIt('printableDiv')">Εκτύπωση αυτού του μπλοκ</button>

</code></pre>

<p>Γράφουμε javascript για να εκτυπώσουμε τα περιεχόμενα του div.</p>

<pre><code class="language-markup line-numbers"><script type="text/javascript"> 
function printIt(divID) { 
    var divContent = document.getElementById(divID); 
    var WinPrint = window.open('', '', 'width=800,height=600'); 
    WinPrint.document.write('<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">' ) 
    WinPrint.document.write(divContent.innerHTML); 
    WinPrint.document.close(); 
    WinPrint.focus(); 
    WinPrint.print(); 
    WinPrint.close(); 
} 
</script>

Foreach programming

Εγγραφείτε για να βλέπετε τα εξειδικευμένα άρθρα.