ol-pdf-printer
v2.1.2TypeScript
Customizable PDF Printer control for Open Layers.
0/weekUpdated 2 years agoMITUnpacked: 1.6 MB
Published by Gastón Zalba
npm install ol-pdf-printerOpenLayers Pdf Printer
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.
IMPORTANT
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.
Examples
- Basic usage
Usage
``
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"`)
#### i18n
Add custom translations
Type: I18n
TODO
- 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!