PhantomJS - paperSize Property

This property gives the size i.e. dimensions of the webpage, which needs to be used to convert the webpage in a pdf format. The paperSize property contains the dimensions required in an object. If paperSize is not defined, the size will be taken of the webpage. Dimensions units supported are ‘mm’, ’cm’, ‘in’ and ‘px’. By default, it is ‘px’.

Parameters

Following are the parameters of the paperSize property

• Margin − It can be given as an object with values ‘top’,’left’,’bottom’,’right’.By default it will considered as 0. For example – margin: {top: '100px',left: '20px',right: '20px'bottom: '10px'}

• Format − Formats supported are ‘A3’,’A4’,’A5’,’Legal’,’Letter’,’Tabloid’.

• Orientation − ‘Portrait’ and ‘Landscape’.By default it is ‘Portrait’.

• Headers and Footers − Header and footer can be provided in an object format with height and contents property.

Syntax

Its syntax is as follows −

header: { 
   height: "1cm", 
   contents: phantom.callback(function(pageNumber, nPages) { 
      return "<h1>Header <b>" + pageNumber + " / " + nPages + "</b></h1>"; 
   }) 
} 
footer: { 
   height: "1cm", 
   contents: phantom.callback(function(pageNumber, nPages) { 
      return "<h1>Footer <b>" + pageNumber + " / " + nPages + "</b></h1>"; 
   }) 
} 

The syntax for paperSize is as follows −

wpage.paperSize = { 
   width: '600px', 
   height: '1500px', 
   
   margin: {
      'top':'50px',  
      'left':'50px', 
      'rigth':'50px' 
   }, 
   orientation:'portrait', 
   
   header: { 
      height: "1cm", 
      contents: phantom.callback(function(pageNumber, nPages) { 
         return "<h5>Header <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   }, 
   footer: { 
      height: "1cm", 
      contents: phantom.callback(function(pageNumber, nPages) { 
         return "<h5>Footer <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   } 
}

Example

Let us take an example to understand the use of paperSize property.

var wpage = require('webpage').create(); 
var url = "http://localhost/tasks/a.html"; 
var output = "test.pdf";

wpage.paperSize = { 
   width: '600px', 
   height: '1500px', 
   
   margin: {
      'top':'50px', 
      'left':'50px', 
      'rigth':'50px' 
   }, 
   orientation:'portrait', 
   
   header: { 
      height: "1cm", 
      contents: phantom.callback(function(pageNumber, nPages) { 
         return "<h5>Header <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   }, 
   footer: { 
      height: "1cm",  
      contents: phantom.callback(function(pageNumber, nPages) { 
         return "<h5>Footer <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   } 
}  
wpage.open(url, function (status) { 
   if (status !== 'success') { 
      console.log('Page is not opening'); 
      phantom.exit(); 
   } else { 
      wpage.render(output); 
      phantom.exit(); 
   } 
}); 

The above program generates the following output.

test.pdf

In the above example, we are opening a URL and giving papersize options to it. The wpage.render (output) converts the URL given to pdf format. The pdf file will be stored in the output mentioned, which in the above example we have given as var output = "test.pdf".

We can define the location where you want to store the file. It gives you the pdf format with the papersize dimension used with the header and the footer. You can execute the above code and see how the pdf files are rendered.