Ruby on Rails -- html2canvas not working with wicked_pdf

Question

So I'm trying to capture a morris.js graph using html2canvas and it works fine in html but when I use wicked_pdf for pdf.erb it doesnt work

My pdf.erb:

<%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" %>
<%= wicked_pdf_stylesheet_link_tag 'dashboard', media: 'all', 'data-turbolinks-track' => true %>
<%= wicked_pdf_stylesheet_link_tag('bootstrap') %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Quicksand" %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Rajdhani" %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Ubuntu" %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto+Slab" %>
<%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>
<%= wicked_pdf_stylesheet_link_tag "morris.css"%>
<%= wicked_pdf_javascript_include_tag "morris.js" %>
<%= wicked_pdf_javascript_include_tag "raphael.js" %>
<%= wicked_pdf_javascript_include_tag "pages.js.coffee"%>
<%= wicked_pdf_javascript_include_tag "html2canvas.js"%>
<style>
canvas
{
    max-width:100%;
}
</style>
    <div class="text-center">
        <% @student.grade.subjects.split(',').each do |subject| %>
            <% if @marks.reject {|x| !(x.marks_upload_reference.subject == subject)}.any? %>
                <h3><%= subject %>:</h3>
                <div class="container">
                    <%= content_tag :div, "", id: "graph--#{subject}", data: {marks: get_hash_for_student_page_graphs(@marks,subject)} %>
                </div>
                    <script>
                        $(document).ready(function(){
                            plot_graph_student("<%=subject%>");
                            html2canvas(document.getElementById("graph--<%=subject%>")).then(function(canvas) {
                                document.getElementById("<%=subject%>--canvas").appendChild(canvas);
                            });
                        });
                    </script>
                    <br />
                    <div id="<%=subject%>--canvas"></div>
            <% end %>
        <% end %>
    </div>

Can anyone tell me what I'm doing wrong?

score 0 · Answer 1 · answered Jan 31 '19 at 17:14

You need to put all of these code you provided to the header, in your views/layouts/pdf.html.erb, like this:

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" %>
    <%= wicked_pdf_stylesheet_link_tag 'dashboard', media: 'all', 'data-turbolinks-track' => true %>
    <%= wicked_pdf_stylesheet_link_tag('bootstrap') %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Quicksand" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Rajdhani" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Ubuntu" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto+Slab" %>
    <%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
    <%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>
    <%= wicked_pdf_stylesheet_link_tag "morris.css"%>
    <%= wicked_pdf_javascript_include_tag "morris.js" %>
    <%= wicked_pdf_javascript_include_tag "raphael.js" %>
    <%= wicked_pdf_javascript_include_tag "pages.js.coffee"%>
    <%= wicked_pdf_javascript_include_tag "html2canvas.js"%>
</head>
<body>
<div id="content" class="pdf-styles">
  <%= yield %>
</div>
</body>
</html>

Ruby on Rails -- html2canvas not working with wicked_pdf

1 Answers1