Geoserver Printing Module | MapFish print service won't print

Question

I followed this documentation to use the printing service in geoserver. I want to print the map layer in pdf format.

Below is my index.html for displaying the map and a button to print the map,

index.html:

<div id="map"></div>    
<a id="export-pdf"><span id="button-label" class="btn btn-info"> Export(pdf)</span></a>

<script>

 var URL = 'http://localhost:9090/geoserver/BernHardt_Practical/wms';
 var centerpos = [84.2, 28.2];
 var newpos = ol.proj.transform(centerpos, 'EPSG:4326', 'EPSG:900913');

 var baseLayer = new ol.layer.Tile({
  projection : projection1,
  source: new ol.source.OSM(),
  isBaseLayer: true 
 });

 var projection1 = new ol.proj.Projection({
  code: 'EPSG:4326',
  units: 'degrees',
  axisOrientation: 'neu'
 });

 var Nepal = new ol.layer.Tile({
   visible: true,
   label:'Nepal',
   source: new ol.source.TileWMS({
     projection : projection1,
     url: URL,          
     params: {
        LAYERS: 'BernHardt_Practical:Nepal'
     },
     serverType: 'geoserver'
   }),
   name: 'Nepal Boundary',
     isBaseLayer: false
   });

 var map = new ol.Map({
   layers: [baseLayer, Nepal],
   target: 'map',
   view: new ol.View({
     center : newpos,
     zoom: 7
   })
 });
</script>

I have linked mapprint.js to apply the MapFish Print plugin.

mapprint.js

var specs={
 "layout":"A4 portrait",
 "srs":"EPSG:4326",
 "units":"degrees",
 "dpi":150,
 "mapTitle":"test",
 "layers":[
 {
    "baseURL":"http://localhost:9090/geoserver/BernHardt_Practical/wms",
    "opacity":1.0,
    "singleTile":false,
    "type":"WMS",
    "layers":["Nepal"],
    "format":"image/png"
 }
 ],
 "pages":[
 {
    "center":[84.2,28.2],
    "scale":2000000
 }
 ]
};

$("#export-pdf").click(function(){
var json = JSON.stringify(specs);
alert(json);
$.ajax(
{
  url:'http://localhost:9090/geoserver/pdf/print.pdf',
  type: 'POST',
  data:
  {
    spec: json
  },
  success: function()
  {
    alert("Success");
  },
  error: function()
  {
    alert("Failure");
  }
});
});

The map is displayed properly and ajax call is working fine but the problem is that it is not printing the pdf. I don't know where my mistake is. According to the documentation, print.pdf command should have displayed the popup window for downloading the pdf file but nothing is happening.

My conf.yaml file is like this,

conf.yaml

# allowed DPIs
dpis: [75, 150, 300]

# the allowed scales
scales:
  - 25000
  - 50000
  - 100000
  - 200000

hosts:
  - !localMatch
    dummy: true

formats:
  - pdf
  - png

layouts:
  A4 portrait:
    mainPage:
      pageSize: A4
      rotation: true
      items:
        - !text
          text: '${mapTitle}'
          fontSize: 30
          spacingAfter: 30
        - !map
          spacingAfter: 30
          width: 400
          height: 400
        - !columns
          absoluteX: 410
          absoluteY: 310
          width: 100
          items:
            - !scalebar
              type: bar
              maxSize: 100
              barBgColor: white
              fontSize: 8
              align: right
        - !text
          font: Helvetica
          fontSize: 9
          align: right
          text: '1:${scale} ${now MM.dd.yyyy}'

Answer 1

I had similar issue. Did exactly like you did. Later, I used GET and solved the issue. You just need to use encodeURI() before passing your json as the spec parameters. Try following:

    $("#export-pdf").click(function(){
    var json = encodeURI(JSON.stringify(specs));
    $.ajax(
    {
    url:'http://localhost:9090/geoserver/pdf/print.pdf?spec=' + json,
    type: 'GET',
      success: function()
      {
        alert("Success");
      },
      error: function()
      {
        alert("Failure");
      }
    });

UPDATE

If you want to download using post then you can do the following:

    $("#export-pdf").click(function(){
        var json = (JSON.stringify(specs));

        $.post('http://localhost:9090/geoserver/pdf/print.pdf', { spec: json}, 
        function(returnedData){
             alert("Passed");
        }).fail(function(){
             alert("Failed");
        });
    });

Notice that you don't have to use encodeURI() with this technique.

Hope it helps.