Fixes #11
6.9 KiB
Cordova Printer-Plugin
A bunch of printing plugins for Cordova 3.x.x
by Sebastián Katzer (github.com/katzer)
Supported Platforms
-
iOS (Print from iOS devices to AirPrint compatible printers)
See Drawing and Printing Guide for iOS for detailed informations and screenshots. -
Android (Print through 3rd party printing apps)
Installation
The plugin can either be installed from git repository or from local file system through the Command-line Interface.
Or cloud based through PhoneGap Build.
Local development environment
From master:
# ~~ from master ~~
cordova plugin add https://github.com/katzer/cordova-plugin-printer.git && cordova prepare
from a local folder:
# ~~ local folder ~~
cordova plugin add de.appplant.cordova.plugin.printer --searchpath path/to/plugin && cordova prepare
or to use the last stable version:
# ~~ stable version ~~
cordova plugin add de.appplant.cordova.plugin.printer && cordova prepare
PhoneGap Build
Add the following xml to your config.xml to always use the latest version of this plugin:
<gap:plugin name="de.appplant.cordova.plugin.printer" />
or to use an specific version:
<gap:plugin name="de.appplant.cordova.plugin.printer" version="0.5.2" />
More informations can be found here.
Removing the Plugin
Through the Command-line Interface:
cordova plugin rm de.appplant.cordova.plugin.printer
ChangeLog
Version 0.6.0 (not yet released)
- [bugfix]: Printing wasn't possible because
isServiceAvailable
returns False IOS - [bugfix]: Using plugin prevents openDatabase() on Android
- [feature]: Added Windows8 support
Thanks to pirvudoru
Further informations
- See CHANGELOG.md to get the full changelog for the plugin.
Using the plugin
The plugin creates the object window.plugin.printer
with the following methods:
Plugin initialization
The plugin and its methods are not available before the deviceready event has been fired.
document.addEventListener('deviceready', function () {
// window.plugin.printer is now available
}, false);
Find out if printing is available on the device
The device his printing capabilities can be reviewed through the printer.isServiceAvailable
interface.
You can use this function to hide print functionality from users who will be unable to use it.
The method takes a callback function, passed to which is a boolean property. Optionally you can assign the scope in which the callback will be executed as a second parameter (default to window).
Note: Printing is only available on devices capable of multi-tasking (iPhone 3GS, iPhone 4 etc.) running iOS 4.2 or later or through a pre-installed printer app (Android).
/**
* Checks if the printer service is avaible (iOS)
* or if a printing app is installed on the device (Android).
*
* @param {Function} callback
* A callback function
* @param {Object?} scope
* The scope of the callback (default: window)
*
* @return {Boolean}
*/
window.plugin.printer.isServiceAvailable(
function (isAvailable) {
alert(isAvailable ? 'Service is available' : 'Service NOT available');
}
);
Send content to a printer
Content can be send to a printer through the printer.print
interface.
The method takes a string or a HTML DOM node.
Further informations
- See the isServiceAvailable method to find out if printing is available on the device.
- All required CSS rules needs to be included in order to print HTML encoded content.
- On Android the functionality between different print apps may vary.
/**
* Sends the content to a printer app or service.
*
* @param {String} content
* HTML string or DOM node
* if latter, innerHTML is used to get the content
* @param {Object?} options
* Platform specific options
*/
window.plugin.printer.print(content, options);
Example
The following exmaple demonstrates how to print out the whole HTML page.
// Get the content
var page = document.body;
// Pass to the printer
window.plugin.printer.print(page);
Platform specifics
Get all available printing apps on Android
The callback function will be called with a second argument which is an array, indicating which printer apps are available for printing.
window.plugin.printer.isServiceAvailable(
function (isAvailable, installedAppIds) {
alert('The following print apps are installed on your device: ' + installedAppIds.join(', '));
}
);
Specify printing app on Android
An App-ID can be assigned as a platform configuration to indicate which 3rd party printing app shall be used. Otherwise the first found application will be used.
window.plugin.printer.print(page, { appId: 'epson.print' });
Quirks
Testing in the iOS Simulator
There's no need to waste lots of paper when testing - if you're using the iOS simulator, select File->Open Printer Simulator to open some dummy printers (print outs will appear as PDF files).
Adding Page Breaks to Printouts
Use the 'page-break-before' property to specify a page break, e.g.
<p>
First page.
</p>
<p style="page-break-before: always">
Second page.
</p>
See W3Schools for more more information: http://www.w3schools.com/cssref/pr_print_pagebb.asp
Note: you will need to add an extra top margin to new pages.
Printing on Real Printers (iOS)
Printing is only supported on AirPrint-enabled printers or with the use of third-party software on your computer. The following pages contain more information:
- AirPrint-enabled printers: http://www.apple.com/ipad/features/airprint.html
- Enabling AirPrint on your computer: http://reviews.cnet.com/8301-19512_7-20023976-233.html, or http://www.ecamm.com/mac/printopia/
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
This software is released under the Apache 2.0 License.
© 2013-2014 appPlant UG, Inc. All rights reserved