Forum Bugs

Using Prince with Angular 1.x

jdecker
Hello,

We are evaluating Prince to attempt to take a couple pages within our Angular app and generate print friendly PDF pages (headers, footers, page nums, etc.).

We can point prince to the URL of one of the pages, and it generates a PDF but the file is blank with the Prince trial logo.

We went and made a simple Angular 1.x app to simplify our test. The page has some static text in the body and some dynamic content. When we use the URL, it looks like Prince does not wait long enough for our dynamic content to load.

Are we doing something wrong? Is it possible for Prince to know when the client side logic has finished on the page? Our pages do not get modified after initial load, but we rely heavily on Angular to format those pages.

We are aware of the workaround using PhantomJS or Selenium to load the page, save it, then pass the local file to Prince but ideally we would like to avoid this solution in the Pipeline we are developing.

You can see our simple page at:
http://prince.celestialwake.com

I've also attached a zip to this post with the assets for the site.

Any help here would be greatly appreciated.

Thanks,
Jeff
  1. simple-angular-test.zip242.3 kB
hallvord
Hi Jeff, thanks for providing a minimal Angular demo :)

I've investigated this a bit, and I've found a small issue that needs fixing in Prince. It uses Function.bind() in a somewhat esoteric way that confuses Prince - there's a new test case here:

https://github.com/yeslogic/miscellaneous-testcases/blob/master/scripting/function-bind-003.htm

I can work around it by overwriting Function.prototype.bind with a shim. The script gets much further but fails when trying to compile the template - I'll keep investigating shortly..

Announcement: repos for tests/utils

jdecker
Hi hallvord,

Were you able to spend any more time on this issue? We would really love to use Prince with a URL to generate our PDFs, but we're currently pursuing a temporary solution that would involve using Selenium to save the post processed HTML page and then run that through Prince.

Thanks,
Jeff
hallvord
Hi Jeff, I have investigated some more and have your demo almost rendering - however, there's one issue which is trickier to debug.. :-/ I'll have another go at that one right now (and with some luck that is also the *last* issue :))

Announcement: repos for tests/utils

Edited by hallvord

hallvord
Hi,
sorry that it took me a while to get through this. I've found three methods Prince needs to add support for to make that Angular demo work: setRequestHeader() and getAllResponseHeaders() of the XMLHttpRequest API and querySelectorAll() on DocumentFragment instances.

Until the developers get around to adding those, you may be able to render the pages you want using this script as a compat helper:
https://github.com/yeslogic/prince-scripts/tree/master/compatibility/angular

Details in script comments. I hope this helps :)

Announcement: repos for tests/utils

mikeday
We have added stubs for getResponseHeader/getAllResponseHeaders in the latest build, but not setRequestHeader yet.