时间戳

首页 > 解决方案 > Ruby on Rails -- html2canvas 不能与 wicked_pdf 一起使用

javascript - Ruby on Rails -- html2canvas 不能与 wicked_pdf 一起使用

问题描述

所以我正在尝试使用 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>

谁能告诉我我做错了什么？

标签： javascriptruby-on-railshtml2canvasmorris.jswicked-pdf

解决方案

您需要将提供给标题的所有这些代码放在您的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>

推荐阅读