Skip to main content ↑ ↓
Topic: Custom Print Button (Read 2205 times) previous topic - next topic

Custom Print Button

My alternative to native print button (insert the code as a Custom View in the top of Page Design):

Code: [Select]
<div>
    <!---   Print Button
            Author:         Euder Ribeiro
            Last Update:    21-Jul-2020
            Obs:            The links bellow may be exchanged to local files
    -->
    <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"/>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
   
    <script>
        function PrintElem(elem)
        {
            var mywindow = window.open('', 'PRINT', 'height=400,width=600');
       
            mywindow.document.write('<html><head><title>' + document.title  + '</title>');
            mywindow.document.write('<html><head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">');
            mywindow.document.write('</head><body >');
            mywindow.document.write('<h1>' + document.title  + '</h1>');
            mywindow.document.write(document.getElementById(elem).innerHTML);
            mywindow.document.write('</body></html>');
       
            mywindow.document.close(); // necessary for IE >= 10
            mywindow.focus(); // necessary for IE >= 10*/
            mywindow.print();
            mywindow.close();
       
            return true;
        }
    </script>
   
    <button type="button" class="btn btn-primary" onclick="PrintElem('page-report-body')">
    <i class="fa fa-print"></i>                             
                Print
    </button>
</div>