Customizable PDF Printer control for Open Layers. Allows the user to select the paper size, paper orientation, DPI, map elements to be displayed (compass, scale, attributions, legends, etc), add a description and more, while printing all visible layers (vector and raster). Also it allows to reframe the view before printing, using an overlay helper to better adjust to the size and aspect ratio selected.
It can export to image formats too, like png, jpeg and webp.
Tested with OpenLayers version 5, 6, 7 and 8.
WMS sources and Icons that use external urls must be setted to crossOrigin: 'anonymous'
. Otherwise, it will ocurr a DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
.
![](/GastonZalba/ol-pdf-printer/raw/master/screenshots/example-1.jpg)
![](/GastonZalba/ol-pdf-printer/raw/master/screenshots/example-2.jpg)
![](/GastonZalba/ol-pdf-printer/raw/master/screenshots/example-3.jpg)
// Default options
var opt_options = {
language: 'en',
i18n: {...}, // Custom translations. Default is according to selected language
showControlBtn: true,
filename: 'Ol Pdf Printer',
allowReframeRegionOfInterest: true,
zoomControlOnReframe: true,
rotationControlOnReframe: true,
units: 'metric',
extraInfo: {
date: true,
url: true,
scale: true
},
mapElements: {
description: true,
attributions: true,
scalebar: true,
compass: './assets/images/compass.svg',
legends: true
},
watermark: {
title: 'Ol Pdf Printer',
subtitle: 'https://github.com/GastonZalba/ol-pdf-printer',
logo: false
},
paperSizes: [
{ size: [594, 420], value: 'A2' },
{ size: [420, 297], value: 'A3' },
{ size: [297, 210], value: 'A4', selected: true },
{ size: [210, 148], value: 'A5' }
],
dpi: [
{ value: 96 },
{ value: 150, selected: true },
{ value: 200 },
{ value: 300 }
],
mimeTypeExport: [
{ value: 'pdf', selected: true},
{ value: 'png' },
{ value: 'jpeg' },
{ value: 'webp' }
],
style: {
paperMargin: {
left: 4,
top: 4,
right: 4,
bottom: 4
},
watermark: {
brcolor: '#000000',
bkcolor: '#ffffff',
txcolortitle: '#d54b4b',
txcolorsubtitle: '#444444'
},
url: {
brcolor: '#000000',
bkcolor: '#ffffff',
txcolor: '#0077cc'
},
specs: {
brcolor: '#000000',
bkcolor: '#ffffff',
txcolor: '#000000'
},
scalebar: {
brcolor: '#000000',
bkcolor: '#ffffff',
txcolor: '#000000'
},
attributions: {
brcolor: '#ffffff',
bkcolor: '#ffffff',
txcolor: '#666666',
txcolorlink: '#0077cc'
},
legends: {
brcolor: '#000000',
bkcolor: '#ffffff',
txcolor: '#000000'
},
description: {
brcolor: '#333333',
bkcolor: '#333333',
txcolor: '#ffffff'
},
compass: {
brcolor: '#000000',
bkcolor: '#333333'
}
},
dateFormat: undefined, // Use browser default
ctrlBtnClass: '',
loader: '<span class="printLoader"></span>',
modal: {
animateClass: 'fade',
animateInClass: 'show',
transition: 300,
backdropTransition: 0,
templates: {
dialog: '<div class="modal-dialog modal-dialog-centered"></div>',
headerClose: `<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Ă—</span></button>`
}
}
}
var pdfPrinter = new PdfPrinter(opt_options);
map.addControl(pdfPrinter);
See CHANGELOG for details of changes in each release.
Load ol-pdf-printer.js
after OpenLayers, jspdf and PDF.js[https://www.npmjs.com/package/pdfjs-dist]. Ol Pdf Printer is available as PdfPrinter
.
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ol-pdf-printer.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" /> <!-- Bootstrap bundle -->
NPM package: ol-pdf-printer.
Install the package via npm
npm install ol-pdf-printer --save-dev
import PdfPrinter from 'ol-pdf-printer';
import 'ol-pdf-printer/dist/css/ol-pdf-printer.min.css';
import 'ol-pdf-printer/dist/css/bootstrap.min.css'; // Personalized bootstrap bundle
//or scss (needs bootstrap installed)
import 'ol-pdf-printer/lib/style/scss/ol-pdf-printer.scss';
TypeScript types are shipped with the project in the dist directory and should be automatically used in a TypeScript project. Interfaces are provided for the Options.
- PdfPrinter
- UnitsSystem
- IPrintOptions
- I18n
- IPaperSize
- IDpi
- brcolor
- bkcolor
- txcolortitle
- txcolorsubtitle
- brcolor
- bkcolor
- txcolor
- brcolor
- bkcolor
- txcolor
- txcolorlink
- brcolor
- bkcolor
- txcolor
- brcolor
- bkcolor
- txcolor
- brcolor
- bkcolor
- txcolor
- brcolor
- bkcolor
- txcolor
- brcolor
- bkcolor
- IStyle
- IMimeTypeExport
- IModal
- IWatermark
- IExtraInfo
- IMapElements
- Options
Extends ol/control/Control~Control
opt_options
Options?
Show the Settings Modal
Returns void
Hide the Settings Modal
Returns void
Create PDF programatically without displaying the Settings Modal
options
IPrintOptionsshowLoading
boolean
Returns void
[enum]
[interface]
Type: any
Type: ("landscape"
| "portrait"
)
Type: any
Type: number
Area of interest. If this is provided, the scale value is not used
Type: (Extent | Polygon)
Type: string
Type: boolean
Type: boolean
Type: boolean
Type: (LegendsOptions | boolean)
Type: boolean
Type: any
Type: boolean
Type: boolean
Type: boolean
[interface] - Custom translations specified when creating an instance
[interface]
Type: string
Type: boolean
[interface]
Type: number
Type: boolean
Watermark border color
Type: string
Watermark background color
Type: string
Watermark title color
Type: string
Watermark subtitle color
Type: string
Url border color
Type: string
Url background color
Type: string
Url text color
Type: string
Attributions border color
Type: string
Attributions background color
Type: string
Attributions text color
Type: string
Attributions links color
Type: string
Scalebar border color
Type: string
Scalebar background color
Type: string
Scalebar text and graph color
Type: string
Specs border color
Type: string
Specs background color
Type: string
Specs text color
Type: string
Legends border color
Type: string
Legends background color
Type: string
Legends text color
Type: string
Description border color
Type: string
Description background color
Type: string
Description text color
Type: string
Compass border color
Type: string
Compass background color
Type: string
[interface]
Only added if Add printer margins
is checked
Type: (number | {top: number, right: number, bottom: number, left: number})
[interface]
[interface]
Type: string
Type: string
Type: number
Type: number
Type: {dialog: (string | HTMLElement)?, headerClose: (string | HTMLElement)?}
[interface]
Check style section to change the color
Type: string
Check style section to change the color
Type: string
Display a small logo next to the title Uns PNG format if you provide a base64 string
Type: (false
| string | HTMLImageElement | SVGElement)
[interface] - Print information at the bottom of the PDF
Print Date
Type: boolean
Current site url
Type: boolean
DPI, Format and Scale information
Type: boolean
[interface] - MapElements
Layers attributions
Type: boolean
Scalebar
Type: boolean
Compass image. North must be pointing to the top
Type: (false
| string | HTMLImageElement | SVGElement)
Display WMS legends
Type: (LegendsOptions | boolean)
Extends ControlOptions
[interface] - Options specified when creating an instance
Export filename
Type: string
Map unit mode
Type: UnitsSystem
Allow to reframe a precise Region of Interest before exporting
Type: boolean
Show zoom control when the reframe insatnce is active
Type: boolean
Show rotation control when the reframe insatnce is active
Type: boolean
Some basic PDF style configuration
Type: IStyle
Information to be inserted at the bottom of the PDF False to disable
Type: (false
| IExtraInfo)
Allow add extra description to the print False to disable
Type: boolean
Elements to be showed on the PDF and in the Settings Modal. False to disable
Type: (false
| IMapElements)
Watermark to be inserted in the PDF. False to disable
Type: (false
| IWatermark)
Paper sizes options to be shown in the settings modal
Type: Array<IPaperSize>
DPI resolutions options to be shown in the settings modal
Export format
Type: Array<IMimeTypeExport>
Locale time zone. Default varies according to browser locale https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#using_locales
Type: Locale
Show the Btn toggler on the map
Type: boolean
ClassName to add to the Btn Control
Type: string
Modal configuration
Type: IModal
Element to be displayed while processing in the modal
Type: (HTMLElement | string | false
)
Language support
Type: ("es"
| "en"
)
Add custom translations
Type: I18n
- Interface comments
- Add some hooks to presonalize the data before print
- ~~Legends support~~
- ~~Imperial units option for scalebar~~
- ~~Customizable date format~~
- ~~Add option to reframe the area before be captured~~
- Events
- Tests!