In order to provide a better and faster printing experience, I am testing potential solutions for client side printing.
This way I can provide a pdf version of the map that can printed easily.
Overall we can support all of our required browsers.
Here is the official example provided by Openlayers. http://openlayers.org/en/latest/examples/export-pdf.html http://rawgit.com/MrRio/jsPDF/master
To provide an image of current map one way to export the map content as an image.
Openlayers is using HTMLCanvas to draw map and all added layers, so exporting the image is very easy using "HTMLCanvasElement.toBlob()".
However toBlob() does not have a cross browser support and we need to use a polyfill for browsers that do not support is natively.
Native support table on desktop browsers
|
Feature
|
Chrome
|
Firefox (Gecko)
|
Internet Explorer
|
Opera
|
Safari
|
|---|---|---|---|---|---|
|
Feature
|
Chrome
|
Firefox (Gecko)
|
Internet Explorer
|
Opera
|
Safari
|
| Basic support | 50 | [19](https://developer.mozilla.org/en-US/Firefox/Releases/19 "Released on 2013-02-19.") (19) | 10 [[ms](https://developer.mozilla.org/en-US/docs/Web/Guide/Prefixes "The name of this feature is prefixed with 'ms' as this browser considers it experimental")] | No support |
No support WebKit does not implement this feature yet. See WebKit bug 71270. |
| Image quality parameter | 50 | [25](https://developer.mozilla.org/en-US/Firefox/Releases/25 "Released on 2013-10-29.") (25) | No support | No support | No support |
Native support on mobile browsers:
|
Feature
|
Android
|
Android Webview
|
Firefox Mobile (Gecko)
|
IE Mobile
|
Opera Mobile
|
Safari Mobile
|
Chrome for Android
|
|---|---|---|---|---|---|---|---|
|
Feature
|
Android
|
Android Webview
|
Firefox Mobile (Gecko)
|
IE Mobile
|
Opera Mobile
|
Safari Mobile
|
Chrome for Android
|
| Basic support | No support | 50 | 19.0 (19) | ? | No support | ? | 50 |
| Image quality parameter | No support | 50 | 25.0 (25) | ? | No support | ? | 50 |
Browser support using JavaScript-Canvas-to-Blob polyfill.
-
- Google Chrome (see Chromium issue #67587)
- Apple Safari 6.0+ (see Mozilla issue #648610)
- Mozilla Firefox 4.0+
- Microsoft Internet Explorer 10.0+
-
- Apple Safari Mobile on iOS 6.0+
- Google Chrome on iOS 6.0+
- Google Chrome on Android 4.0+
A library to generate PDFs in client-side JavaScript. https://github.com/MrRio/jsPDF
-
- Reliable printing across browsers
- Nice abstraction over client side pdf generation
- autoPrint function to open browser print preview as soon as pdf is ready.
- Handle different print sizes and orientations. (eg: a4, a5, landscape, portrait)
- Project is backed buy a company and is relatively active
-
- You need to position elements on a pixel basis. Similar to absolute position is css jsPDF offers a custom renderer that in theory can print your html as it is but needs more testing.
- UTF-8 is not supported by default, however there might be some plugins allowing you to use it, such as addHTML
- _Current build does not have IE6-9 shim enabled _
jsPDF will work in IE6+*, Firefox 3+, Chrome, Safari 3+, Opera. For IE9 and below, we lazily load a Flash shim called Downloadify which enables the files to be downloaded.