SVG для PDF не работает должным образом в Rails 5.0

Первое изображение ниже - «Вид браузера», а второй - «Просмотр PDF».

SVG для 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.

jquery,css,ruby-on-rails,pdf,svg,

4

Ответов: 2


0

Возможно, это поможет вам https://groups.google.com/forum/#!topic/prawn-ruby/kiiUAV_IFpE

Prawn pdf очень удобен для любого типа создания PDF-файлов

http://prawnpdf.org/manual.pdf

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


0

Как уже упоминал Джейсон Йост, JavaScript не будет выполнен конвертером PDF. Мне неизвестен какой-либо PDF-конвертер, который выполняет JavaScript, поэтому я бы попытался заменить JavaScript на серверный код, который уже создает правильный SVG.

Обновить:

Итак, цель вашего 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 %>   

как вы можете видеть, я добавил блок «ruby» для вычисления значения, а затем заменил оригинал stroke-dashoffsetна вычисленное значение.

Поскольку это только псевдокод, пожалуйста, не ожидайте его работы, но он должен сделать концепцию понятной. Не стесняйтесь задавать дополнительные вопросы.

JQuery, CSS, рубин-на-рельсы, PDF, SVG,
Похожие вопросы