OpenLayers 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

// 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);

Changelog

See CHANGELOG for details of changes in each release.

Install

Browser

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.

<script src="https://unpkg.com/[email protected]"></script>

CSS

<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 -->

Parcel, Webpack, etc.

NPM package: ol-pdf-printer. Install the package via npm

npm install ol-pdf-printer --save-dev

JS

import PdfPrinter from 'ol-pdf-printer';

CSS

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

PdfPrinter

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

UnitsSystem

[enum]

IPrintOptions

[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

I18n

[interface] - Custom translations specified when creating an instance

IPaperSize

[interface]

size

Type: [number, number]

value

Type: string

selected

Type: boolean

IDpi

[interface]

value

Type: number

selected

Type: boolean

brcolor

Watermark border color

Type: string

bkcolor

Watermark background color

Type: string

txcolortitle

Watermark title color

Type: string

txcolorsubtitle

Watermark subtitle color

Type: string

brcolor

Url border color

Type: string

bkcolor

Url background color

Type: string

txcolor

Url text color

Type: string

brcolor

Attributions border color

Type: string

bkcolor

Attributions background color

Type: string

txcolor

Attributions text color

Type: string

txcolorlink

Attributions links color

Type: string

brcolor

Scalebar border color

Type: string

bkcolor

Scalebar background color

Type: string

txcolor

Scalebar text and graph color

Type: string

brcolor

Specs border color

Type: string

bkcolor

Specs background color

Type: string

txcolor

Specs text color

Type: string

brcolor

Legends border color

Type: string

bkcolor

Legends background color

Type: string

txcolor

Legends text color

Type: string

brcolor

Description border color

Type: string

bkcolor

Description background color

Type: string

txcolor

Description text color

Type: string

brcolor

Compass border color

Type: string

bkcolor

Compass background color

Type: string

IStyle

[interface]

paperMargin

Only added if Add printer margins is checked

Type: (number | {top: number, right: number, bottom: number, left: number})

IMimeTypeExport

[interface]

IModal

[interface]

animateClass

Type: string

animateInClass

Type: string

transition

Type: number

backdropTransition

Type: number

templates

Type: {dialog: (string | HTMLElement)?, headerClose: (string | HTMLElement)?}

IWatermark

[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)

IExtraInfo

[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

IMapElements

[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)

Options

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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#using_locales

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!