Including Javascript files and working with AngularJS

[AleksandarTokarev]

Hello, I am using Rails 4.2 + AngularJS and i am trying to export the show Page of an item to PDF. I want to include the AngularJS framework which i am including in project by adding it to application.js as //= require angular/angular Also i want to include my Angular controller logic which is located in app/assets/javascripts/person.js I am including person.js in application.js by adding //= require person.js

In my pdf conversion template, i have

<%= wicked_pdf_javascript_src_tag "person.js" %>
<%= wicked_pdf_javascript_include_tag "angular/angular" %>

When i open the pdf file of that page, i get the angular (all library ) code and nothing else. How can i fix this issue?

Thanks a lot in advance

[unixmonkey]

The way wicked_pdf_javascript_include_tag works by inlining the javascript doesn't work well with some large libraries like Angular, that will break out of a <script> tag. Try using a regular javascript_include_tag, but add the host so there is a full path for wkhtmltopdf to read.

Something like this:

javascript_include_tag('http://example.com/assets/javascripts/angular/angular.js')

Of course, if you are using a single threaded server in development (like webrick), this can cause a deadlock. You can switch to using Puma as described in #384, or just use a CDN URI like one from http://cdnjs.com/libraries/angular.js/

Also, check out #366

[unixmonkey]

@AleksandarTokarev Did this work for you or point you in the right direction?

[AleksandarTokarev]

No it did not, i could not get it to work that way. I tried few things and nothing. I went with not using Javascript in PDF generation. Cheers

[Nosfheratu]

did you have any ajax call on this pdf?

[ritec]

@Nosfheratu Just curious why you ask if there are ajax calls? I am having an issue rendering content generated by Javascript as well on the pdf using Highcharts and I do have ajax calls. (sorry to hijack)

[Nosfheratu]

@ritec wow this was one year ago... well, I was working on a report for a rails application but the pdf was loading data using angular in my case but it happened with all asynchronous http requests (ajax), my report was in blank but I figured out that wicked_pdf does not work well with ajax calls, the issue was not with highlight chart, it was with wicked_pdf and ajax calls, so I decided to use embedded ruby code instead so I created a view without angular stuff but including highlight chart library and it works

my conclusion is that wicked_pdf doesn't support ajax calls for rendering

I hope it really helps you

[unixmonkey]

I don't think that conclusion is entirely accurate.

When the html/css/js gets saved to a static HTML file on the filesystem (and not in the context of a running web server), that ajax calls to relative paths like /things/1, need to be fully qualified to https://example.com/things/1.

Could this help explain the issue you are experiencing?

[unixmonkey]

Also, as mentioned above, if you have a single-threaded webserver in development (like WebBrick), the rendering of the pdf will be mid-request while trying to reach out via ajax to get content, and that ajax request will be queued after the current request (which will never finish because it's in the middle of building a PDF).

[ritec]

These are two very good leads, thanks @unixmonkey and thanks @Nosfheratu for replying back! I will investigate these possibilities further.

[Nosfheratu]

@unixmonkey how would you solve that? I had adjusted deadline I needed to deliver that important report, what I did is use simple erb (or haml) views, fetch all the data in instances variables in the controller that calls the pdf view and embed those values in javascript calls (almost all was arrays or collection parsed to json)

[unixmonkey]

@Nosfheratu That sounds like a creative solution! I approve.

If you are referring to using fully qualified paths, you might need to change your Angular application or related services to prepend the protocol + host + domain to the request paths.

If you are referring to a deadlocked ajax request that never finishes or times out, then switch to using a multithreaded webserver in development, like puma, which is also the new default dev server in Rails 5.