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。

由於這只是僞代碼，請不要期望它的工作，但它應該使概念更清晰。隨意提出其他問題。