Problems doing pagebreak on webshot

Im doing an app that has to produce a pdf of a report
im using webshot this is my script

Router.route('generatePDF', {
  path: '/reportes/generate-pdf/:_id', // example route with _id param
  where: 'server',
  action: function() {
    // Get invoice ID parameter
    var id = this.params._id;
    // Setting name for our generated PDF
    var fileName = "reporte_.pdf";
    
    // Load NPM packages
    var webshot  = Npm.require('webshot');
    var fs       = Npm.require('fs');
    var Future   = Npm.require('fibers/future');
    var fut      = new Future();
    // Set path to your route here - Meteor.absoluteUrl() is your root url ("http://localhost:3000/")
    var url      = Meteor.absoluteUrl('reportepdf/'+id); // Meteor.absoluteUrl('path/to/your/route');
    // How you want your PDF to look, it also waits 3 seconds just to make sure photo has been taken
    var options = {
      "renderDelay": 3000,
      "paperSize": {
        "format": "Letter", 
        "orientation": "portrait", 
        "margin": "1cm"
      }
    };
    // Magic happens here...
    webshot(url, fileName, options, function(err) {
      if (err) {
        return console.log(err);
      } else { 
        fs.readFile(fileName, function (error,data) {
          if (error) {
            return console.log(err);
          }
          fs.unlinkSync(fileName);
          fut.return(data);
        });
      }
    });
    // Give our generated PDF to the client
    this.response.writeHead(200, {'Content-Type': 'application/pdf',"Content-Disposition": "attachment; filename=" + fileName});
    this.response.end(fut.wait());
  }
});

Im able to produce the pdf
but im not able to do a pagebreak or create a new pdf page
im using this in css

	.break {
		page-break-before: always;
	}

and all its flavors but none work
anyone has experienced this using webshot? and how did you solve it?

Solved! it was a css problem
i solved the problem applying css height auto

	html, body {
	    position: relative;
	    height: auto;
	    width: 100%;
	    overflow-x: hidden;
	}

The css was limiting the heights (or they where not set at all)
my new working css

@media print {	
	html, body {
	    position: relative;
	    height: auto;
	    width: 100%;
	    overflow-x: hidden;
	}
	p.center {
		text-align: center;
	}
	.logos {
		max-width: 150px;
	}
	h1 {
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
	}
	h3 {
		font-size: 14px;
		text-align: center;
	}
	.tables {
    	border-style: solid;
    	border-top-color: gray;
    	border-width: 1px;
    	border-bottom-color: transparent;
    	border-left-color: transparent;
    	border-right-color: transparent;
	}
	.row-wrapper {
		border-style: groove;
		border-radius: 10px;
		border-color: blue;
		padding: 5px 10px 5px 10px; 
		margin-left: 20px;
		margin-right: 20px;
		border-width: 2px;
		line-height: 1.2;
	}
	.photo {
		max-height: 150px;
	}
	p.footer {
		font-size: 10px;
  		position: absolute;
  		right: 0;
  		bottom: 0;
  		left: 0;
	}
    div.page
    {
      page-break-before: always;
    }
}

Hope i can save someone from the 16 hours i spent solving this!

1 Like