Rails 5: рендеринг файла PDF из шаблонов html.erb и css - PullRequest
Новая
       55

Rails 5: рендеринг файла PDF из шаблонов html.erb и css

0 голосов
/ 21 ноября 2018

Я пытаюсь использовать princely gem для рендеринга диплома pdf для пользователей, которые закончили курсы для маршрутизации пользователей /: id / serve_diploma.когда я пишу этот маршрут, я вижу, что браузер получает данные, а не ошибки, но я получаю пустую страницу.

Это мои файлы контроллера, css и html.erb:

users_controller.rb 

def serve_diploma
   @user = User.find_by_id!(params[:id])
   completed_courses_id_array = @user.user_courses.select{|uc| uc.completed == true}.map(&:course_id)
   @completed_courses_count = @user.user_courses.select{|uc| uc.completed == true}.map(&:completed).flatten.count
   @user_courses_title_array = Course.find(completed_courses_id_array).map(&:title)
   @courses_count = Course.all.count
   @completion_date = @user.user_courses.order('completed_course_date DESC').first.completed_course_date

   render :pdf => "#{@user.name}",
          :template => '/shared/diploma.component.html.erb',
          :stylesheets => '/public/diploma.css',
          :formats => %w[pdf]
end

diploma.component.html.erb 

<div *ngIf="user" class="container frame">
  <div class="inner-frame">
    <h3 class="academy center">Superheros Academy</h3>
    <h5 class="certificate center">This is to certify that</h5>
    <h1 class="user-name center"><%= @user.name.upcase %></h1>
    <h4 class="completed-courses center">has successfully completed the folowing courses (<%= @completed_courses_count %>/<%= @courses_count %>)</h4>
    <% @user_courses_title_array.each do |uc| %>
    <p class="course-list center"><%= uc %>,</p>
    <h2 class="diploma center" style="padding-top:2%;">Diploma</h2>
    <div class="row justify-content-lg-center align-items-center">
      <div class="col-lg-4" style="padding-top:5%; float:left;">
        <p class="date-ceo center"><%= @completion_date %></p>
        <hr class="center" style="position:relative;">
        <p class="completion-date-steve center">Date of Completion</p>
        <p class="date-ceo">&nbsp;</p>
      </div>
      <div class="col-lg-4 center">
        <img src="../../assets/images/stamp.png" class="d-inline-block" style="height:200px;">
      </div>
      <div class="col-lg-4 center" style="padding-top:5%; float:right;">
        <p class="date-ceo center">&nbsp;</p>
        <hr class="center" style="position:relative;">
        <p class="completion-date-steve center">Peter Parker</p>
        <p class="date-ceo center">CEO</p>
      </div>
    </div>
    <% end %>
  </div>
</div>

diploma.css 

@page { size: A4 landscape; margin: 0; }


.center{
  text-align: center !important;
}

.frame{
  background-image: url('../../assets/images/frame.png');
  background-repeat: no-repeat;
  height: 21cm;
  background-size: 100% 100%;
  padding: 85px;
}

hr{
  height: 1px;
  border-top: 1px solid #ccc;
  border-color: black;
  width: 240px;
  margin: -1em -1rem 2rem 3rem
}

.inner-frame{
  position: relative;
}

.academy{
  font-family: "Playfair Display";
  font-size: 35px;
  color: #3E3F46;
  font-style: italic;
}

.certificate{
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 25px;
  color: #3E3F46;
}

.user-name{
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 60px;
  color: #3E3F46;
  margin-top: -2%;
  margin-bottom: -1%;
}

.completed-courses{
  font-family: 'Open Sans';
  font-size: 25px;
  font-weight: 100;
  color: #3E3F46;
}

.course-list{
  font-family: 'Open Sans';
  font-size: 22px;
  color: #3E3F46;
  padding: 0 100px;
}

.diploma{
  font-family: 'Open Sans';
  font-size: 40px;
}

.completion-date-steve{
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 20px;
  color: #3E3F46;
  margin-top: -1rem;
  text-align: center;
}

.date-ceo{
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 20px;
  color: #3E3F46;
  margin-top: -1rem;
}
...