July 20, 2015 3 minute read

Getting Started with Kapsel – Part 14 — Printer (SP09+)

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.

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.

Back to Getting Started With Kapsel

3 Comments

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

Radovan Nieslanik

October 24, 2016 at 7:10 am

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.

Daniel Van Leeuwen

Blog Post Author

October 26, 2016 at 5:48 pm

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

Radovan Nieslanik

October 27, 2016 at 7:38 am

Thank you very much, for this really perfect work on Kapsel.

Getting Started with Kapsel – Part 14 — Printer (SP09+)

Printer (New in SP06)

Assigned Tags