PhantomJS - Bildschirmaufnahme
PhantomJS ist sehr hilfreich, um einen Screenshot einer Webseite zu erstellen und eine Webseite in eine PDF-Datei zu konvertieren. Wir haben hier ein einfaches Beispiel gegeben, um zu demonstrieren, wie es funktioniert.
Beispiel
var page = require('webpage').create();
page.open('http://phantom.org/',function(status){
page.render('phantom.png');
phantom.exit();
});
Führen Sie das obige Programm aus und die Ausgabe wird als gespeichert phantom.png.
Konvertieren Sie Webseiten in PDFs
PhantomJS hilft auch beim Konvertieren von Webseiten in PDFs, wobei Kopf- und Fußzeilen hinzugefügt werden. Schauen Sie sich das folgende Beispiel an, um zu verstehen, wie es funktioniert.
var wpage = require('webpage').create();
var url = "https://en.wikipedia.org/wiki/Main_Page";
var output = "test.pdf";
wpage.paperSize = {
width: screen.width+'px',
height: '1500px',
margin: {
'top':'50px',
'left':'50px',
'rigtht':'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();
}
});
Das obige Programm generiert Folgendes output.
The above will convert the page into pdf and will be saved in test.pdf
Konvertieren Sie eine Leinwand in ein Bild
Phantomjs können eine Leinwand leicht in ein Bild konvertieren. Schauen Sie sich das folgende Beispiel an, um zu verstehen, wie es funktioniert.
var page = require('webpage').create();
page.content = '<html><body><canvas id="surface" width="400" height="400"></canvas></body></html>';
page.evaluate(function() {
var context,e1;
el = document.getElementById('surface');
context = el.getContext('2d');
context.font = "30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Welcome to PhantomJS ", 200, 200);
document.body.style.backgroundColor = 'white';
document.body.style.margin = '0px';
});
page.render('canvas.png');
phantom.exit();
Das obige Programm generiert Folgendes output.