फ़ैंटॉमजेएस के साथ किसी पृष्ठ का हिस्सा कैसे प्रस्तुत करें?

Question

मैं व्यक्तिगत HTML तत्वों को Phantom.JS का उपयोग करके पीएनजी में प्रस्तुत करना चाहता हूं। यदि संभव है तो किस प्रकार, क्या कोई जानता है? साथ ही, मैं एक पृष्ठ प्रस्तुत करने के लिए Phantom.js का उपयोग कैसे करूं जो उपयोगकर्ता पहले से देख रहा है?

Answer 1

केवल एक पृष्ठ का हिस्सा प्रस्तुत करने के लिए आपको पृष्ठ के लिए clipRect विशेषता सेट करने और फिर इसे प्रस्तुत करने की आवश्यकता है।

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

मुझे आपके प्रश्न के दूसरे भाग को समझ में नहीं आता है। Phantom.js हेडलेस अर्थ है कि कोई वास्तविक प्रदर्शन नहीं है जिसे उपयोगकर्ता देख रहा है।

Answer 2

मैं एक ही जरूरत थी, मैं इस कोशिश की और यह मेरे लिए ठीक काम किया:

मत भूलना यूआरएल

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(); 
}); 

Answer 3

आप CasperJS उपयोग कर सकते हैं में http://www, एक अन्य परियोजना के आधार पर PhantomJS।

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

casper.run(); 

Answer 4

कार्य उदाहरण।

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(); 
}); 

Answer 5

नीचे दिया गया समाधान मेरे लिए काम करता है।

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

लेकिन मुझे लगता है कि यह केवल तभी काम करता है जब हम एक छवि को पीडीएफ नहीं दे रहे हैं। पीडीएफ के लिए इस wokaround करने के लिए, इस लिंक मदद मिल सकती है इस

page.evaluate(function (element){ 
    $(element).appendTo('body'); 
    $('body > :not(' + element + ')').hide(); 
    }, element);  
    }); 

window.setTimeout(function(){ 
    page.render("page.pdf"); 
    },1000); 

कोशिश: How to hide all elements except one using jquery?

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