SVG to PDF在Rails 5.0中无法正常工作

Question

下面的第一张图片是“浏览器视图”，第二张图片是“PDF视图”。

SVG to PDF工作不正常，我正在动态设置stroke-dashoffset的值，并且在浏览器上工作正常，但是当我生成PDF时，它不起作用。

浏览器中查看

PDF查看

这里是我使用的代码：

CSS

.svg circle { 
    stroke-dashoffset: 0; 
    //transition: stroke-dashoffset 1s linear; 
    stroke: #666; 
    stroke-width: 1em; 
} 
.svg .bar { 
    stroke: #33aaa3; 
} 
.cont { 
    display: block; 
    height: 200px; 
    width: 200px; 
    margin: 2em auto; 
    border-radius: 100%; 
    position: relative; 
} 
.cont:after { 
    border-radius: 100%; 
    content: attr(data-pct) "%"; 
    display: block; 
    font-size: 2em; 
    height: 160px; 
    left: 50%; 
    line-height: 160px; 
    margin-left: -80px; 
    margin-top: -80px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    width: 160px; 
} 
.col-xs-3 > p { 
    text-align: center; 
} 

HTML

<% if @skills.present? %> 
      <div class="filter_group skills_area"> 
       <h2 class="filter_title">SKILLS</h2> 
       <div class="panel-body"> 
        <div class="row"> 
         <% @count = 1 %> 
         <% @skills.each do |skill| %> 
          <div class="col-xs-3 "> 
           <div class="cont" id="cont-<%= @count %>" data-pct="100"> 
            <svg class="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
             <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#33aaa3"></circle> 
             <circle class="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> 
            </svg> 
           </div> 
           <p><%= skill.title %></p> 
          </div> 
         <% @count += 1 %> 
         <% end %> 
        </div> 
       </div> 
      </div> 
     <% end %> 

jQuery的

<% @count = 1 %> 
    <% @skills.each do |skill| %> 
    <script> 
     $(document).ready(function() { 
      var val = <%= current_user.profile ? rating_by_skill(current_user.profile.id, skill.id) ? number_with_precision(rating_by_skill(current_user.profile.id, skill.id), :precision => 2) : 0 : 0 %> * 20; 
      var $circle = $('#cont-'+<%= @count %>).find('.svg .bar'); 

      if (isNaN(val)) { 
      val = 0; 
      } 
      else{ 
      var r = $circle.attr('r'); 
      var c = Math.PI*(r*2); 

      if (val < 0) { val = 0;} 
      if (val > 100) { val = 100;} 

      var pct = ((100-val)/100)*c; 
      //alert(pct); 
      $circle.css({ strokeDashoffset: pct}); 

      $('#cont-'+<%= @count %>).attr('data-pct',val); 
      } 
     }); 
    </script> 
    <% @count += 1 %> 
    <% end %> 

我使用Rails 5.

Answer 1

可能这可以帮助你https://groups.google.com/forum/#!topic/prawn-ruby/kiiUAV_IFpE

虾PDF是非常方便的用于任何类型的自定义生成PDF

http://prawnpdf.org/manual.pdf

http://prawnpdf.org/docs/0.11.1/Prawn/Graphics.html

Answer 2

贾森·约斯特已经提到的，JavaScript就无法通过PDF转换器来执行。我不知道任何执行JavaScript的PDF转换器，所以我会尝试用已经产生正确SVG的服务器端代码替换JavaScript。

更新：

所以，你的JavaScript的目标，它更新了第二圈的strokeDashoffset。 JavaScript的似乎是通过内嵌样式做到这一点，但也似乎是它的一个属性...

<svg class="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#33aaa3"></circle> 
    <circle class="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> 
</svg> 

一切你<%和%>之间做的是由服务器处理，并应以精为PDF 。所以，你需要扔掉JavaScript和改变你的SVG来是这样的：你可以

（对不起，我不知道红宝石什么，所以把它当作伪代码）

    <% @count = 1 %> 
        <% @skills.each do |skill| %> 
<% 
val = current_user.profile ? rating_by_skill(current_user.profile.id, skill.id) ? number_with_precision(rating_by_skill(current_user.profile.id, skill.id), :precision => 2) : 0 : 0 ; 
val = val * 20; 

// calculate the percentage the same way as in the javascript... 
// and store it in a variable 

pct = ((100-val)/100)*c; 
%> 
         <div class="col-xs-3 "> 
          <div class="cont" id="cont-<%= @count %>" data-pct="100"> 
           <svg class="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
            <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#33aaa3"></circle> 
            <circle class="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="<%= pct %>"></circle> 
           </svg> 
          </div> 
          <p><%= skill.title %></p> 
         </div> 
        <% @count += 1 %> 
        <% end %> 

看，我添加了一个“红宝石”代码块来计算值，然后用计算的值替换原来的stroke-dashoffset。

由于这只是伪代码，请不要期望它的工作，但它应该使概念更清晰。随意提出其他问题。