Export WMS layer to PDF using Openlayers and Geoserver

Question

I'm trying to replicate this https://openlayers.org/en/latest/examples/export-pdf.html pretty simple, you press the button and whatever is on the map gets exported to a pdf file, I tried copying the code from here, but it won't work on my project, here:

https://jsfiddle.net/m77t3esb/

Now you can't see my layers as you don't have my geoserver, but this is what its supposed to look like normally.

When you press the guardar capa button, it should download a pdf file titled map.pdf, but instead, this happens.

The map gets distorted and nothing is downloaded.

The part of the code that should export is this

var raster = new ol.layer.Tile({ source: new ol.source.OSM() });

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

I'm pretty sure that the issue is with the variable raster there, as I don't fully understand what it does, and I don't know how to make it work on my project.

Previously I was trying to import to png, but was unable to do it and couldn't get much help here, so I'm hopefully trying something else.

Answer 1

Addressing the issue of the map being distorted, these lines are setting the map size to match the format being downloaded

map.setSize(size);
map.getView().fit(extent);

But since the map div size is set in the style tag above, the map is squished to fit those dimensions. To avoid this, you should make sure the ratio of the download format matches the ratio of the map div as defined in the CSS.

As for the downloading problem, You should be aware that your JSFiddle won't run because it's referencing a geoserver instance running on localhost instead of a publicly available one. I won't be able to help debug your problem with downloading until it's using a publicly available geoserver instance. Though I suspect @bennos has a strong lead on the answer in their comment.