Question

所以我试图使用html2canvas捕获morris.js图，它在html中可以正常工作，但是当我将wicked_pdf用于pdf.erb时，它不起作用

我的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>

有人可以告诉我我在做什么错吗？

Answer 1

您需要将您提供的所有这些代码放在header / views / layouts / pdf.html.erb中，如下所示：

<!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无法与wicked_pdf一起使用

1 个答案: