Угловой 6: рендеринг PDF-файла из HTML + SASS с привязкой данных - PullRequest
Новая
       25

Угловой 6: рендеринг PDF-файла из HTML + SASS с привязкой данных

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

У меня есть угловой проект курсов и пользователей, и я хочу добавить опцию для диплома, чтобы после того, как пользователь закончил курс, он мог загрузить диплом для всех курсов, которые он закончил до сих пор.Я собрал html и sass файлы для него, но я не знаю, что делать дальше.HTML-файл, использующий данные из компонента (который использует данные из рельсового бэкэнда), так что это не статический файл.Я нашел только пакеты для шоу pdf, но не отрисовал пользовательский с использованием данных из бэкэнда и компонентов.

Заранее спасибо!

pdf.html 

<div *ngIf="user" class="container frame">
  <div class="inner-frame">
    <div class="row pt-4 justify-content-lg-center align-items-center"><h3 class="academy">Academy</h3></div>
    <div class="row pt-4 justify-content-lg-center align-items-center"><h5 class="certificate">This is to certify that</h5></div>
    <div class="row pt-4 justify-content-lg-center align-items-center"><h1 class="user-name">{{user.nam | upercase}}</h1></div>
    <div class="row pt-4 justify-content-lg-center align-items-center"><h4 class="completed-courses">has successfully completed the folowing courses ({{user.user_courses.count}}/{{courses.count}})</h4></div>
    <div *ngFor="let uc of user.user_courses" class="row pt-4 justify-content-lg-center align-items-center"><p class="course-list center">{{uc}},</p></div>
    <div class="row pt-4 justify-content-lg-center align-items-center"><h2 class="diploma">Diploma</h2></div>
    <div class="row pt-4 justify-content-lg-center align-items-center">

      <div class="col-lg-4" style="padding-top:5%;">
        <p class="date-ceo center">{{date.today}}</p>
        <hr>
        <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" style="padding-top:5%;">
        <p class="date-ceo center">&nbsp;</p>
        <hr>
        <p class="completion-date-steve center">Will</p>
        <p class="date-ceo center">CEO, Project</p>
      </div>
    </div>
  </div>
</div>

pdf.sass 

$gray: #3E3F46
$purple: #712B8F

.center
  text-align: center

.frame
  background-image: url('../../assets/images/frame.png')
  background-repeat: no-repeat
  height: 100vh
  background-size: 100%
  padding: 90px

hr
  height: 1px
  border-top: 1px solid #ccc
  border-color: black
  margin: -1em 0rem 0rem

.inner-frame
  position: relative

.academy
  font-family: "Playfair Display"
  font-size: 40px
  color: $gray
  font-style: italic

.certificate
  font-family: 'Open Sans'
  font-weight: 100
  font-size: 23px
  color: $gray

.user-name
  font-family: 'Open Sans'
  font-weight: bold
  font-size: 55px
  color: $gray
  margin-top: -2%
  margin-bottom: -1%

.completed-course
  font-family: 'Open Sans'
  font-size: 27px
  color: $gray

.course-list
  font-family: 'Open Sans'
  font-size: 25px
  color: $gray
  padding: 0 30px

.diploma
  font-family: 'Open Sans'
  font-size: 50px

.completion-date-steve
  font-family: 'Open Sans'
  font-weight: bold
  font-size: 24px
  color: $gray

.date-ceo
  font-family: 'Open Sans'
  font-weight: 100
  font-size: 24px
  color: $gray
  margin-top: -1rem
...