Export PDF example

This example uses OpenLayers v4.0.1. The latest is v.

#### Export PDF example

Page size
Resolution

Example of exporting a map as a PDF.

Example of exporting a map as a PDF using the jsPDF library.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.format.WKT
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector

Copy Edit
Export PDF example Example of exporting a map as a PDF. var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var format = new ol.format.WKT(); var feature = format.readFeature( 'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' + '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' + '-39.1552734375, 10.689697265625 -25.0927734375))'); feature.getGeometry().transform('EPSG:4326', 'EPSG:3857'); var vector = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }) }); var map = new ol.Map({ layers: [raster, vector], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); var dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], a5: [210, 148] }; var loading = 0; var loaded = 0; var exportButton = document.getElementById('export-pdf'); exportButton.addEventListener('click', function() { exportButton.disabled = true; document.body.style.cursor = 'progress'; var format = document.getElementById('format').value; var resolution = document.getElementById('resolution').value; var dim = dims[format]; var width = Math.round(dim[0] * resolution / 25.4); var height = Math.round(dim[1] * resolution / 25.4); var size = /** @type {ol.Size} */ (map.getSize()); var extent = map.getView().calculateExtent(size); var source = raster.getSource(); var tileLoadStart = function() { ++loading; }; var tileLoadEnd = function() { ++loaded; if (loading === loaded) { var canvas = this; window.setTimeout(function() { loading = 0; loaded = 0; var data = canvas.toDataURL('image/png'); var pdf = new jsPDF('landscape', undefined, format); pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map.pdf'); source.un('tileloadstart', tileLoadStart); source.un('tileloadend', tileLoadEnd, canvas); source.un('tileloaderror', tileLoadEnd, canvas); map.setSize(size); map.getView().fit(extent); map.renderSync(); exportButton.disabled = false; document.body.style.cursor = 'auto'; }, 100); } }; map.once('postcompose', function(event) { source.on('tileloadstart', tileLoadStart); source.on('tileloadend', tileLoadEnd, event.context.canvas); source.on('tileloaderror', tileLoadEnd, event.context.canvas); }); map.setSize([width, height]); map.getView().fit(extent); map.renderSync(); }, false); .map { max-width: 566px; } <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> <form class="form"> <label>Page size </label> <select id="format"> <option value="a0">A0 (slow)</option> <option value="a1">A1</option> <option value="a2">A2</option> <option value="a3">A3</option> <option value="a4" selected>A4</option> <option value="a5">A5 (fast)</option> </select> <label>Resolution </label> <select id="resolution"> <option value="72">72 dpi (fast)</option> <option value="150">150 dpi</option> <option value="300">300 dpi (slow)</option> </select> </form> <button id="export-pdf">Export PDF</button>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Export PDF example</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
        <style>
          .map {
            max-width: 566px;
          }
        </style>
      </head>
      <body>
        <div class="row-fluid">
          <div class="span12">
            <div id="map" class="map"></div>
          </div>
        </div>
        <form class="form">
          <label>Page size </label>
          <select id="format">
            <option value="a0">A0 (slow)</option>
            <option value="a1">A1</option>
            <option value="a2">A2</option>
            <option value="a3">A3</option>
            <option value="a4" selected>A4</option>
            <option value="a5">A5 (fast)</option>
          </select>
          <label>Resolution </label>
          <select id="resolution">
            <option value="72">72 dpi (fast)</option>
            <option value="150">150 dpi</option>
            <option value="300">300 dpi (slow)</option>
          </select>
        </form>
        <button id="export-pdf">Export PDF</button>
        <script>
          var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
          });

          var format = new ol.format.WKT();
          var feature = format.readFeature(
              'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
                  '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
                  '-39.1552734375, 10.689697265625 -25.0927734375))');
          feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

          var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [feature]
            })
          });

          var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          var dims = {
            a0: [1189, 841],
            a1: [841, 594],
            a2: [594, 420],
            a3: [420, 297],
            a4: [297, 210],
            a5: [210, 148]
          };

          var loading = 0;
          var loaded = 0;

          var exportButton = document.getElementById('export-pdf');

          exportButton.addEventListener('click', function() {

            exportButton.disabled = true;
            document.body.style.cursor = 'progress';

            var format = document.getElementById('format').value;
            var resolution = document.getElementById('resolution').value;
            var dim = dims[format];
            var width = Math.round(dim[0] * resolution / 25.4);
            var height = Math.round(dim[1] * resolution / 25.4);
            var size = /** @type {ol.Size} */ (map.getSize());
            var extent = map.getView().calculateExtent(size);

            var source = raster.getSource();

            var tileLoadStart = function() {
              ++loading;
            };

            var tileLoadEnd = function() {
              ++loaded;
              if (loading === loaded) {
                var canvas = this;
                window.setTimeout(function() {
                  loading = 0;
                  loaded = 0;
                  var data = canvas.toDataURL('image/png');
                  var pdf = new jsPDF('landscape', undefined, format);
                  pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
                  pdf.save('map.pdf');
                  source.un('tileloadstart', tileLoadStart);
                  source.un('tileloadend', tileLoadEnd, canvas);
                  source.un('tileloaderror', tileLoadEnd, canvas);
                  map.setSize(size);
                  map.getView().fit(extent);
                  map.renderSync();
                  exportButton.disabled = false;
                  document.body.style.cursor = 'auto';
                }, 100);
              }
            };

            map.once('postcompose', function(event) {
              source.on('tileloadstart', tileLoadStart);
              source.on('tileloadend', tileLoadEnd, event.context.canvas);
              source.on('tileloaderror', tileLoadEnd, event.context.canvas);
            });

            map.setSize([width, height]);
            map.getView().fit(extent);
            map.renderSync();

          }, false);
        </script>
      </body>
    </html>