Phantomjs equivalent of browser's “Save Page As… Webpage, complete”

Question

For my application I need to programmatically save a copy of a webpage HTML along with the images and resources needed to render it. Browsers have this functionality in their Save page as... Webpage, complete options.

It is of course easy to save the rendered HTML of a page using phantomjs or casperjs. However, I have not seen any examples of combining this with downloading the associated images, and doing the needed DOM changes to use the downloaded images.

Given that this functionality exists in webkit-based browsers (Chrome, Safari) I'm surprised it isn't in phantomjs -- or perhaps I just haven't found it!

Answer 1

Alternatively the PhantomJS, you can use the CasperJS to achieve the required result. CasperJS is a framework based on the PhantomJS, however, with a variety of modules and classes that support and complement the PhantomJS.

An example of a script that you can use is:

casper.test.begin('test script', 0, function(test) {
    casper.start(url);

    casper.then(function myFunction(){
        //...
    });

    casper.run(function () {
        //...
        test.done();
    });
});

With this script, within a "step", you can perform your downloads, be it a single image of a document, the page, a print or whatever. Take a study on the download methods, getPageContent and capture / captureSelector in this link.

I hope these pointers can help you to go further!