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

<script src="https://unpkg.com/ol-pdf-printer@2.1.2"></script>

CSS

<link rel="stylesheet" href="https://unpkg.com/ol-pdf-printer@2.1.2/dist/css/ol-pdf-printer.css" />
<link rel="stylesheet" href="https://unpkg.com/ol-pdf-printer@2.1.2/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.