1. Home
  2. Docs
  3. Advanced Customizations
  4. Add Custom Button to Flipbook
  5. Add print button to flipbook

Add print button to flipbook

This customization allows user to add an extra print button that prints the PDF file used by the flipbook.


JavaScript Code:

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script>
  
  jQuery(function($){

    var customButtonFunction = function(){
      //Custom button code goes here
      var flipbook = this;
      printJS({printable:flipbook.options.source , type:'pdf', showModal:true})
    };

    var alternateDownloadFile = "https://dearflip.com/wp-content/uploads/2020/03/foee_hbf_meatatlas_jan2014.pdf";
    
    //We add the function in Global Defaults so that all flipbooks in the page act same.
    DFLIP.defaults.onReady = function(flipbook) {

      var customButton = jQuery('<div class="df-ui-btn ti-printer df-ui-custom-print-button" title="Print"></div>');
      customButton.on("click",customButtonFunction.bind(flipbook));
      //if you want to insert in some other place.. find the button and then insert before that button
       flipbook.ui.share.after(customButton);
    };

  });
  
</script>

CSS StyleSheet:

<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 Comment