Customizable PDF Printer control for Open Layers.
npm install ol-pdf-printercrossOrigin: 'anonymous'. Otherwise, it will ocurr a DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
js
// 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: '',
modal: {
animateClass: 'fade',
animateInClass: 'show',
transition: 300,
backdropTransition: 0,
templates: {
dialog: '',
headerClose:
}
}
}
var pdfPrinter = new PdfPrinter(opt_options);
map.addControl(pdfPrinter);
`
Changelog
See CHANGELOG for details of changes in each release.
Install
$3
#### JS
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.
`HTML
`
#### CSS
`HTML
`
$3
NPM package: ol-pdf-printer.
Install the package via npm
npm install ol-pdf-printer --save-dev
#### JS
`js
import PdfPrinter from 'ol-pdf-printer';
`
#### CSS
`js
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 type definition
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.
API
#### Table of Contents
- PdfPrinter
- Parameters
- showPrintSettingsModal
- hidePrintSettingsModal
- createPdf
- Parameters
- UnitsSystem
- IPrintOptions
- format
- orientation
- resolution
- scale
- regionOfInterest
- description
- compass
- attributions
- scalebar
- legends
- safeMargins
- typeExport
- url
- date
- specs
- I18n
- IPaperSize
- size
- value
- selected
- IDpi
- value
- selected
- 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
- paperMargin
- IMimeTypeExport
- IModal
- animateClass
- animateInClass
- transition
- backdropTransition
- templates
- IWatermark
- title
- subtitle
- logo
- IExtraInfo
- date
- url
- specs
- IMapElements
- attributions
- scalebar
- compass
- legends
- Options
- filename
- units
- allowReframeRegionOfInterest
- zoomControlOnReframe
- rotationControlOnReframe
- style
- extraInfo
- description
- mapElements
- watermark
- paperSizes
- dpi
- mimeTypeExports
- dateFormat
- showControlBtn
- ctrlBtnClass
- modal
- loader
- language
- i18n
$3
Extends ol/control/Control~Control
#### Parameters
- opt_options Options?
#### showPrintSettingsModal
Show the Settings Modal
Returns void
#### hidePrintSettingsModal
Hide the Settings Modal
Returns void
#### createPdf
Create PDF programatically without displaying the Settings Modal
##### Parameters
- options IPrintOptions
- showLoading boolean
Returns void
$3
_\[enum]_
$3
_\[interface]_
#### format
Type: any
#### orientation
Type: ("landscape" | "portrait")
#### resolution
Type: any
#### scale
Type: number
#### regionOfInterest
Area of interest. If this is provided,
the scale value is not used
Type: (Extent | Polygon)
#### description
Type: string
#### compass
Type: boolean
#### attributions
Type: boolean
#### scalebar
Type: boolean
#### legends
Type: (LegendsOptions | boolean)
#### safeMargins
Type: boolean
#### typeExport
Type: any
#### url
Type: boolean
#### date
Type: boolean
#### specs
Type: boolean
$3
_\[interface]_ - Custom translations specified when creating an instance
$3
_\[interface]_
#### size
Type: \[number, number]
#### value
Type: string
#### selected
Type: boolean
$3
_\[interface]_
#### value
Type: number
#### selected
Type: boolean
$3
Watermark border color
Type: string
$3
Watermark background color
Type: string
$3
Watermark title color
Type: string
$3
Watermark subtitle color
Type: string
$3
Url border color
Type: string
$3
Url background color
Type: string
$3
Url text color
Type: string
$3
Attributions border color
Type: string
$3
Attributions background color
Type: string
$3
Attributions text color
Type: string
$3
Attributions links color
Type: string
$3
Scalebar border color
Type: string
$3
Scalebar background color
Type: string
$3
Scalebar text and graph color
Type: string
$3
Specs border color
Type: string
$3
Specs background color
Type: string
$3
Specs text color
Type: string
$3
Legends border color
Type: string
$3
Legends background color
Type: string
$3
Legends text color
Type: string
$3
Description border color
Type: string
$3
Description background color
Type: string
$3
Description text color
Type: string
$3
Compass border color
Type: string
$3
Compass background color
Type: string
$3
_\[interface]_
#### paperMargin
Only added if Add printer margins is checked
Type: (number | {top: number, right: number, bottom: number, left: number})
$3
_\[interface]_
$3
_\[interface]_
#### animateClass
Type: string
#### animateInClass
Type: string
#### transition
Type: number
#### backdropTransition
Type: number
#### templates
Type: {dialog: (string | HTMLElement)?, headerClose: (string | HTMLElement)?}
$3
_\[interface]_
#### title
Check style section to change the color
Type: string
#### subtitle
Check style section to change the color
Type: string
#### logo
Display a small logo next to the title
Uns PNG format if you provide a base64 string
Type: (false | string | HTMLImageElement | SVGElement)
$3
_\[interface]_ - Print information at the bottom of the PDF
#### date
Print Date
Type: boolean
#### url
Current site url
Type: boolean
#### specs
DPI, Format and Scale information
Type: boolean
$3
_\[interface]_ - MapElements
#### attributions
Layers attributions
Type: boolean
#### scalebar
Scalebar
Type: boolean
#### compass
Compass image. North must be pointing to the top
Type: (false | string | HTMLImageElement | SVGElement)
#### legends
Display WMS legends
Type: (LegendsOptions | boolean)
$3
Extends ControlOptions
_\[interface]_ - Options specified when creating an instance
#### filename
Export filename
Type: string
#### units
Map unit mode
Type: UnitsSystem
#### allowReframeRegionOfInterest
Allow to reframe a precise Region of Interest before exporting
Type: boolean
#### zoomControlOnReframe
Show zoom control when the reframe insatnce is active
Type: boolean
#### rotationControlOnReframe
Show rotation control when the reframe insatnce is active
Type: boolean
#### style
Some basic PDF style configuration
Type: IStyle
#### extraInfo
Information to be inserted at the bottom of the PDF
False to disable
Type: (false | IExtraInfo)
#### description
Allow add extra description to the print
False to disable
Type: boolean
#### mapElements
Elements to be showed on the PDF and in the Settings Modal.
False to disable
Type: (false | IMapElements)
#### watermark
Watermark to be inserted in the PDF.
False to disable
Type: (false | IWatermark)
#### paperSizes
Paper sizes options to be shown in the settings modal
Type: Array<IPaperSize>
#### dpi
DPI resolutions options to be shown in the settings modal
Type: Array<IDpi>
#### mimeTypeExports
Export format
Type: Array<IMimeTypeExport>
#### dateFormat
Locale time zone. Default varies according to browser locale
Type: Locale
#### showControlBtn
Show the Btn toggler on the map
Type: boolean
#### ctrlBtnClass
ClassName to add to the Btn Control
Type: string
#### modal
Modal configuration
Type: IModal
#### loader
Element to be displayed while processing in the modal
Type: (HTMLElement | string | false)
#### language
Language support
Type: ("es" | "en"`)