Phantomjs: As screen Capture to generate image/pdf files

In our day-to-day life we come across various websites eg travel portal, shopping, loan landing, food and restuarants etc. These websites provide different services to its users. If for eg its a food and resturant portal, than one of their service would be to allow people to download the menu card as pdf/image . At times the pdf/image menu card will have the same look and feel as it is shown on the website. In such cases the phantomjs can come into play.


What is PhantomJs?

Phantomjs is nothing but a virtual browser or headless browser ie a browser that runs without a GUI, allowing you to navigate the web and interact with web pages from your terminal. It is mainly run on the hosting servers. Normally we have the browsers eg chrome, Firefox, IE running on the client system. So you can imagine Phantomjs as one of this browsers running locally on the hosting servers but without UserInterface. Phantomjs can be used for various functionalities eg capture web page, network monitoring, Page automation etc.  


How to integrate PhantomJs?

PhantomJs needs to be installed (http://phantomjs.org/download.html) on the server . Depending on the server type eg Linux, windows the particular PhanomJs setup needs to be selected for installation.  

Phantomjs for screen capture

The phantomjs needs only the website url for which the pdf/image needs to be generated and the file name, along with few settings for screen capture.

Static url and static file name for screen capture: 

Once the phantomjs is installed, next step will be to create a settings.js file which will hold the initial settings needed for basic functionality .  

The settings file will hold following code eg. To print a menu as png file.

var page = require('webpage').create();
page.open('http://www.restuarantabc.com/goan/menu1', function() {
  page.render('menu.png');
  phantom.exit();
});

The above file needs to be run through Phantomjs using following lines in the server terminal  

phantomjs /path/to/settings.js

This will create a file as menu.png in the current directory. So also we can create .pdf and other image extension files . Once this menu.png file is generated than it can be used to serve various purpose across the full website. eg. Showing the image as tumbnail etc.  

Dynamic url and dynamic file names for screen capture: 

It is also possible to give dynamic url and filename to settings.js instead of static url and filename.

Settings.js will have following code:

var page = require('webpage').create(),
system = require('system'),
address, output;
address = system.args[1];
output = system.args[2];

page.open(address, function(status) {
page.render(system.args[2]);
phantom.exit();
});

The following line needs to be run in the terminal to generate the png file

phantomjs path/to/settings.js http://www.restuarantabc.com/goan/menu1 menu1.png

http://www.restuarantabc.com/goan/menu1 will be argument 1 and menu1.png will be argument 2 to the settings.js 


Other settings:

We can also set various other settings like to set the orientation, border, width and height of the print(pdf/image) in settings.js

var page = require('webpage').create();
page.viewportSize = {width: 980, height: 800};
page.paperSize = {format: 'Tabloid', orientation: 'portrait', border: '0.2cm'};

You can check here for detail settings options:

http://phantomjs.org/api/webpage/property/settings.html


Refrences:  

http://phantomjs.org


Categories: HTML JavaScript
Tags: JavaScript

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.