Custom Print

Here is an option to use the Ctrl+P function with some JavaScript to create a custom print function.

Step 1

Add an HTML Component to your page and add the following source code.

<p><button id="printBtn" class="btn-primary btn.btn-primary btn-lg"> 🖨️ Print </button></p>

Feel free to remove "btn-lg" if you want a smaller button.

Step 2

Save the HTML component and hover over the info icon to get the component ID.

Step 3

Add the following code to the JavaScript tab of your page.

$(function() {
    (function() {
        var beforePrint = function() {
            // $(’.table-actions’).css(‘display’,‘none’);
            $(’#printBtn’).css(‘display’, ‘none’);
        };

        var afterPrint = function() {
            //$('.table-actions').css('display','block');
            $('#printBtn').css('display', 'block');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function(mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
    }());
});

TB.render(‘component_11’, function(data) {
    data.ele.find(’#printBtn’).on(‘click’, function() {
        // alert(“printing”);
        window.print();
    });
});