Javascript Girl
  1. Javascript Girl
  3. Comment rendre partie d'une page avec PhantomJS?
Intereting Posts
Javascript: arrondir un flotteur vers le haut jusqu'à 25. (ou quoi que ce soit …) Stockage des fichiers .jpg dans le stockage local Combien de RAM chaque caractère dans ECMAScript / JavaScript contient-il? Grille angulaire ui comment afficher un chargeur Imprimez les problèmes des pages Web :: recherche d'un bon tutoriel pour imprimer des pages Web (compilé par Jquery ui, jqgrid, zend) Javascript supprime l'attribut "désactivé" à l'entrée html Intellij idée javascript reconnaissance dans la balise script où type n'est pas "texte / javascript" Javascript setTimeout fonction répéter Inclure les caractères arabes dans l'expression régulière JavaScript? Comment puis-je vérifier si le tableau d'objets possède des valeurs de propriété en double? Erreur swfupload 302 Accessoire d'index personnalisé Javascript Comment tester l'erreur lancée avec Chai.should On ne peut accéder à cet objet dans des fonctions JavaScript privées sans piratage? Google Chrome "window.open" solution de contournement?

Comment rendre partie d'une page avec PhantomJS?

J'aimerais rendre les éléments HTML individuels dans PNG en utilisant Phantom.JS. Est-ce que quelqu'un sait si cela est possible? Aussi, comment utiliser Phantom.js pour rendre une page que l'utilisateur examine déjà?

Pour rendre uniquement une partie de la page, vous devez définir l'attribut clipRect pour la page, puis la rendre. 

var clipRect = document.querySelector(selector).getBoundingClientRect(); page.clipRect = { top: clipRect.top, left: clipRect.left, width: clipRect.width, height: clipRect.height }; page.render('capture.png');

Je ne comprends pas la deuxième partie de votre question. Phantom.js est sans tête signifiant qu'il n'y a pas d'affichage réel qu'un utilisateur regarde.

Exemple de travail. 

 var page = require('webpage').create(); page.open('http://google.com', function() { // being the actual size of the headless browser page.viewportSize = { width: 1440, height: 900 }; var clipRect = page.evaluate(function(){ return document.querySelector('#hplogo').getBoundingClientRect(); }); page.clipRect = { top: clipRect.top, left: clipRect.left, width: clipRect.width, height: clipRect.height }; page.render('google.png'); phantom.exit(); });

Vous pouvez utiliser CasperJS, un autre projet basé sur PhantomJS. 

 casper.start('http://www.weather.com/', function() { this.captureSelector('weather.png', '#wx-main'); }); casper.run();

La solution ci-dessous fonctionne pour moi. 

  var clipRect = document.querySelector(selector).getBoundingClientRect(); page.clipRect = { top: clipRect.top, left: clipRect.left, width: clipRect.width, height: clipRect.height }; page.render('capture.png');

Mais je remarque que cela fonctionne uniquement si nous rendons une image pas un pdf. Pour discuter de cela pour le pdf, essayez ceci 

 page.evaluate(function (element){ $(element).appendTo('body'); $('body > :not(' + element + ')').hide(); }, element); }); window.setTimeout(function(){ page.render("page.pdf"); },1000);

Ces liens peuvent aider: Comment cacher tous les éléments sauf un en utilisant jquery?

https://github.com/ariya/phantomjs/issues/10465

J'ai eu le même besoin, j'ai essayé cela et ça m'a bien fonctionné:

N'oubliez pas le http://www dans l'URL 

 var page = require('webpage').create(); page.open('YourPageURL', function (status) { if (status !== 'success') { console.log('Network Problem'); } else { var p = page.evaluate(function () { return document.getElementById('yourDivID').innerHTML }); console.log(p); } phantom.exit(); });