Skip to content
View Categories

Add Print button

2 min read

Table of Contents
Experimental customizations are not included by default and are extended to the plugin. Please use with caution and proper consent.

Case: #

Trigger custom function or action when viewer has finished loading the document and required files for displaying the PDF.

Demo: #

Process: #

We use onReady function to detect the viewer has UI initialized and add the required print button.

If needed you can use app.options.showDownloadControl to add or hide print button. Normally a pdf that cannot be downloaded should not be printed.

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script>
    var customButtonFunction = function () {
        //Custom button code goes here
        var app = this;
        printJS({ printable: app.options.source, type: 'pdf', showModal: true })
    };

    jQuery(function () {
        DEARPDF.defaults.onReady = function (app) {

            //if needed you can use app.options.showDownloadControl to add or hide print button. Normally a pdf that cannot be downloaded should not be printed.
            if (app.options.showDownloadControl == true) {
                var customButton = jQuery('<div class="df-ui-btn df-icon-print df-ui-custom-print-button" title="Print"></div>');
                customButton.on("click", customButtonFunction.bind(app));
                //if you want to insert in some other place.. find the button and then insert before that button
                app.ui.controls.share.after(customButton);
            };
            
        };
    });
</script>

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
For WordPress, please read on 
How to add Custom Code to WordPress Pages

Leave a Reply

Your email address will not be published. Required fields are marked *