Phantomjs: Page clipRect is ignored if output is PDF

[leplatrem]

_[email protected] commented:_

Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.
1.5.0 (development)

Reproductible with the following snippet :

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 1600, height: 1200 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.clipRect = {top: 100, left: 100, 
                                 width: 200, height: 200};
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Which operating system are you using?

Ubuntu 11.10

Did you use binary PhantomJS or did you compile it from source?

Using antono ppa : https://launchpad.net/~antono/+archive/phantomjs

Please provide any additional information below.

Similar issue was marked as invalid : http://code.google.com/p/phantomjs/issues/detail?id=134

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #465.
:star2:   6 people had starred this issue at the time of migration.

[aconrad]

_[email protected] commented:_

Same problem here with PhantomJS 1.6.0. PNG works just fine though.

[trainiac]

_[email protected] commented:_

Any plans to fix this in the near future? Better yet, is there anywhere to read what is on the roadmap?

[rouge8]

_[email protected] commented:_

Problem persists in PhantomJS 1.7.0.

[eranimo]

Any update? This still occurs.

[sudiptochoudhury]

I am using 1.9 and the problem persists. It ignores the clipRect and captures the whole page.

[dan-mesa]

1.9.1 and the problem persists. Have any of you been using a workaround? I'm thinking about phantomjs -> png -> pdf, but that's unfortunate.

[ova2]

This issue is important indeed! Can we hope that clipRect is accepted by PDF rendering in the next PhantomJS version? Thanks in advance.

[JustinAiken]

:+1:

[skion]

Had a quick look, and even though in PhantomJS the path to "print" a PDF is entirely different from the path to "render" a pixel image (probably to retain vector-ish properties), in the end this seems to be primarily a limitation in the underlying Qt library.

However, it does look possible to add a clipRect feature to QWebFrame::print(), potentially by overloading that function with a clipRect, similar to QWebFrame::render(), and in that case passing onto printContext::spoolRect() instead of printContext::spoolPage() at the lowest level.

Again, from what I can see we'd need a patch in QtWebkit in order to fix this; I don't see yet how it can be worked around just in PhantomJS without going via a pixel image.

[mateuszjarzewski]

You can very easly do pdf rect-clip render using combination of iframes and body overflow hidden style and height.
I just bump to it after many hours of playing about.
Have fun!

[mailtorakeshp]

@mateuszjarzewski Can you please share some piece of code on how you achieved it?

[adonishong]

This issue still there in 1.9.7... Looking forward the day this issue be fixed...

@mateuszjarzewski Would you please share in work around in achieving your method, thank you very much.

[mandb]

... :|

[vbauer]

Version 1.9.8. Problem is still there.

[mahnunchik]

+1

[xvik]

+1

[vbauer]

I've just found, that parameters top:0 & left:0 (with any values for width & height) render full page instead of specific area.

[Friedel-Castor]

I have the same problem. I want to select a DOM-Element and render only those to a pdf.
This solution helped me to find a workaround:
http://stackoverflow.com/questions/1535331/how-to-hide-all-elements-except-one-using-jquery

It hides all elements except the element that i want to render.
The only thing i changed was the order of the commands.
Here is my Code:

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

Maybe it helps someone

[eranimo]

This issue is now three years old and many people are having this problem. Maybe it should be a higher priority?

[cabralmartin]

+1

[mrmarktyy]

+1

[ugoertz]

+1

[GoldHornKing]

+1

[juazemar]

+1

[sergey-datskevich-vrp]

+1

[angelim]

+1

[szakharchenko]

+1

[deekookee]

+1

[alex7egli]

+1

[ggevgg]

+1

[ZhichaoY]

+1

[bulinutza]

It would be a life saver if page.clipRect behaved the same in .pdf as in the image formats. Please please add this :-)

[leplatrem]

If it is a matter of life maybe it would be worth considering providing some help to the maintainers of this project #justsaying

[bulinutza]

@leplatrem I really would if I have the knowledge required or the time. My company is heavily relying on phantomjs and we would be willing to pay for a phanomjs license is funding was something that would help the development efforts.

[sreejithz]

+1 :+1:
me too waiting for this.

[Jeff-14159]

+100 need this fixed too. on 2.1.1

[leplatrem]

Adding +1* here won't have much impact. AFAIK it is clearly stated that the program is distributed as-is and without any warrantee.

Maybe relying on a funding platform (like http://www.fixthatbug.com or whatever) could help. If several companies need that bug fixed, they could gather funds to attract developers with the right skillset.

(my 2 cents)

[szakharchenko]

@leplatrem , I suppose those who really needed the functionality just wrote a simple ghostscript-based workaround like me:).

[leplatrem]

@szakharchenko now you can start a company that sells the script to those who seem to really need it ;)

[rlsz]

+1

[rubystar]

+1

[vvvvoid]

+1

[Hamza-324]

@szakharchenko mind sharing ? I really need it !

[rlsz]

@Hamza-324
I inject jquery, hide all other tags, then print the area.
A temporary solution:

var width=$('.print').width();
var offset=20;
$('.print').parents().each(function(index,item){
    $(item).siblings().hide();
    $(item).css("margin", "0").css("border", "0px").css("padding", "0px").css("overflow","hidden");
});
$('.print').css("margin", offset+"px").css("border", "0px").css("padding", "0px").width(width);

[stale[bot]]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!