Rails 5: render pdf file from html.erb and css templates











up vote
0
down vote

favorite












I'm trying to use princely gem to render diploma pdf for users who have finished courses to route users/:id/serve_diploma.
when I write this route, I see the browser get data and not errors, but I get a blank page.



These are my controller, css and html.erb files:



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;

}








ruby-on-rails ruby-on-rails-5 pdf-generation erb princexml







share|improve this question


























    up vote
    0
    down vote

    favorite












    I'm trying to use princely gem to render diploma pdf for users who have finished courses to route users/:id/serve_diploma.
    when I write this route, I see the browser get data and not errors, but I get a blank page.



    These are my controller, css and html.erb files:



    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;
    
}








    ruby-on-rails ruby-on-rails-5 pdf-generation erb princexml







    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm trying to use princely gem to render diploma pdf for users who have finished courses to route users/:id/serve_diploma.
      when I write this route, I see the browser get data and not errors, but I get a blank page.



      These are my controller, css and html.erb files:



      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;
      
}








      ruby-on-rails ruby-on-rails-5 pdf-generation erb princexml







      share|improve this question













      I'm trying to use princely gem to render diploma pdf for users who have finished courses to route users/:id/serve_diploma.
      when I write this route, I see the browser get data and not errors, but I get a blank page.



      These are my controller, css and html.erb files:



      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;
      
}








      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





      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





      <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>





      <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>





      @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;
      
}





      @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;
      
}





      ruby-on-rails ruby-on-rails-5 pdf-generation erb princexml




      ruby-on-rails ruby-on-rails-5 pdf-generation erb princexml






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 21 at 15:29









      Ofir Sasson

      9614




      9614





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415373%2frails-5-render-pdf-file-from-html-erb-and-css-templates%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415373%2frails-5-render-pdf-file-from-html-erb-and-css-templates%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Berounka

          Image
          Berounka.mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} Caractéristiques Longueur 139  km Bassin 8 861  km 2 Bassin collecteur Elbe Débit moyen ? Cours Source Confluence de la Mže et de la Radbuza · Localisation Pilsen · Altitude 305  m · Coordonnées 49° 45′ 13″ N, 13° 23′ 24″ E Confluence Vltava · Localisation Prague · Altitude 187  m · Coordonnées 49° 59′ 43″ N, 14° 24′ 04″ E Géographie Pays traversés   République tchèque modifier   La Berounka est une rivière de la République tchèque. Elle porte le nom de Mže depuis sa source en Allemagne près de la frontière jusqu'à sa confluence avec la Radbuza à Plzeň. Elle continue ensuite sous le nom de Berounka jusqu'à sa confluence avec la Vltava, près de Prague. La rivière est une destination prisée pour les amateurs de canoë, qui appréc...
          Read more

          Sphinx de Gizeh

          Image
          Pour les articles homonymes, voir Sphinx. Sphinx de Gizeh.mw-parser-output .entete.egypte-antique{background-image:url("//upload.wikimedia.org/wikipedia/commons/c/cc/Picto_infobox_ancient_Egypt.png")} Site d'Égypte antique Le visage du sphinx de Gizeh. Noms en arabe أبو الهول , Abou al-Hôl Localisation Région Basse-Égypte Coordonnées 29° 58′ 31″ nord, 31° 08′ 16″ est Géolocalisation sur la carte : Égypte Sphinx de Gizeh modifier   Le sphinx de Gizeh est la statue thérianthrope qui se dresse devant les grandes pyramides du plateau de Gizeh, en Basse-Égypte. Sculpture monumentale monolithique la plus grande du monde [ 1 ] avec 73,5 mètres de longueur, 14 mètres de largeur et 20,22 mètres de hauteur, elle représente un sphinx couchant. Réalisée vers -2500, elle serait attribuée à Djédefrê, l'un des pharaons de la IV e  dynastie, représentant son père le pharaon Khéops. Sommaire 1 Étymologie 2 Desc...
          Read more

          Different font size/position of beamer's navigation symbols template's content depending on regular/plain...

          Image
          3 Let's suppose I'd like to divert the navigation symbols template (e.g. in order replace them by the frame numbers, see this bug report ;) I would be facing troubles regarding the font size/position, depending on regular/plain frames, as shown by the following MCE. How could I get rid of these troubles? documentclass{beamer} usetheme{PaloAlto} setbeamertemplate{navigation symbols}{insertframenumber/inserttotalframenumber} begin{document} begin{frame} frametitle{A regular frame} end{frame} begin{frame}[plain] frametitle{A plain frame} end{frame} end{document} beamer header-footer share | improve this question asked Dec 10 '18 a...
          Read more