2

Has anyone noticed that this example http://openlayers.org/en/latest/examples/export-pdf.html hangs if you try to print more then once?

I am using the same code and does it for me as well. I have tried to figure out why it does it but no luck. The problem seems to arise when resetting the map to the original size and extent. For me if I omit that part it works but it keeps zooming out which I don't want.

1

you can use window.print() in javascript to print screen

or

Export PDF example .map { max-width: 566px; } Page size A0 (slow) A1 A2 A3 A4 A5 (fast) Resolution 72 dpi (fast) 150 dpi 300 dpi (slow) Export 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: {
        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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.