Skip to Content

/wp-content/uploads/2015/07/sap_logo_750999.png

Printer (New in SP06)

This plugin enables the ability to print using AirPrint on iOS and the Android Printing Framework on Android 4.4 or higher devices.  It uses the open source Printer plugin.

For additional details on the Kapsel Printer plugin see the file C:\SAP\MobileSDK3\KapselSDK\plugins\print\www\printer.js or Using the Printer Plugin.

The following steps will demonstrate using this plugin.

  • Create the project.
    cordova create C:\Kapsel_Projects\PrinterDemo com.mycompany.printer PrinterDemo
    cd C:\Kapsel_Projects\PrinterDemo
    cordova platform add android
    
    cordova create ~/Documents/Kapsel_Projects/PrinterDemo com.mycompany.printer PrinterDemo
    cd ~/Documents/Kapsel_Projects/PrinterDemo
    cordova platform add ios
  • Add the Kapsel or open source printer plugin.
    cordova plugin add de.appplant.cordova.plugin.printer --searchpath %KAPSEL_HOME%/plugins or cordova plugin add de.appplant.cordova.plugin.printer --searchpath $KAPSEL_HOME/plugins or cordova plugin add https://github.com/katzer/cordova-plugin-printer.git
  • Replace www\index.html with the following contents.
     <html
        <head>
            <title>Printer Demo</title>
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script>
                window.onerror = onError;
                document.addEventListener("deviceready", init, false);
                var printer = null;
                
                function onError(msg, url, line) {
                    var idx = url.lastIndexOf("/");
                    var file = "unknown";
                    if (idx > -1) {
                        file = url.substring(idx + 1);
                    }
                    navigator.notification.alert("An error occurred in " + file + " (at line # " + line + "): " + msg);
                    return false; //suppressErrorAlert;
                }
                
                function init() {
                    printer = cordova.plugins.printer;
                    document.getElementById("thedate").value = new Date().toLocaleString();
                }
            
                function isPrinterAvailable() {
                    log("checking printer availability");
                    printer.isAvailable(callbackAvailable);
                }
    
                function callbackAvailable(isAvailable) {
                    if (isAvailable) {
                        log("Printer is available");
                    }
                    else {
                        log("Printer is not available");
                    }
                }
    
                function print(original) {
                    var page;
                    if (original) {
                    	page = location.href; //notice the log lines are not shown
                    }
                    else {
                        var body = document.body;
                        page = body;
                    }
                    
                    log("about to print " + page);
                    printer.print(page, {name:"Index.html Print Job"}, printJobFinishedOrCancelled);
                }
                
                function printOtherPage() {
                   var page = "http://weather.gc.ca/city/pages/on-82_metric_e.html";   
                   log("about to print " + page);
                   printer.print(page, {name:"Forecast Print Job"}, printJobFinishedOrCancelled);
                }
    
                function printJobFinishedOrCancelled() {
                    log("Printing finished or cancelled");
                }
        
                //new in SP11
                function printInTheBackground() {
                    //printer.printFiles(["pdf.pdf", "pict.jpg"], {name:"BGPrintJob"}, printJobFinishedOrCancelled);
                    printer.printFiles(["pdf.pdf"], {name:"BGPrintJob"}, printJobFinishedOrCancelled);
                }
    
                function log(line) {
                    var results = document.getElementById("printer_results");
                    results.innerHTML+= "<br>" + line;
                }
                
            </script>
        </head>
        <body>
            <h1>Printer Sample</h1>
            <button onclick="isPrinterAvailable()">Is Printer Available</button>
            <button onclick="print(true)">Print Original Page</button>
            <button onclick="print(false)">Print Current Page</button>
            <button onclick="printOtherPage()">Print Other Page</button>
            <button onclick="printInTheBackground()">Background Print</button>
            <input type="text" id="thedate">
            <div id="printer_results"></div>
        </body>
    </html>
    
  • Prepare, build and deploy the app with the following commands.
    cordova run android
    or
    cordova run ios

    The Print Original Page passes the location.href to the print method while Print Current Page passes document.body which includes the logged messages such as Printer is available.  Notice that the date text input is empty either way.  Finally the Print Other Page prints the current weather forecast in Waterloo Ontario (http://weather.gc.ca/city/pages/on-82_metric_e.html).

    The following demonstrates how to view the results of printing a page on an Andoid emulator and an iOS simulator. Press the Is Printer Available button and then the Print Current Page.

    image1.PNGimage2.PNGimage3.PNGimage4.PNGimage5.PNG

    To download the Printer Simulator, in Xcode, choose Xcode > More Developer Tools… > Hardware IO Tools for Xcode – Xcode 6.3.
    Once downloaded start the Printer Simulator.  Note if an error appears in Xcode while attempting to print, the following may help.  AirPrint Connection Refused Error.

    image6.PNGimage7.PNGimage8.PNG

Back to Getting Started With Kapsel

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Radovan Nieslanik

    Thank you for this very useful post. Could you just check or replace the hyperlink to index.html with sample code of your application? Now it just says “Page Not Found”. Thank you.

    (0) 
    1. Daniel Van Leeuwen Post author

      Sorry about that.  I have included the index.html content directly in the blog post.

      With the migration to the new SCN it seems that previously linked files are no longer accessible.

      I am working on writing and publishing an updated version of this guide targeted for SP 13+ but it is taking some time.  The first few posts are available at https://blogs.sap.com/2016/10/20/getting-started-kapsel-part-1-sp13/

      Regards,
      Dan van Leeuwen

      (0) 

Leave a Reply