Question

我对课程和用户有一定的计划，我想添加文凭的选项，因此，用户完成课程后，他可以下载到目前为止完成的所有课程的文凭。我已经为此构建了html和sass文件，但是我不知道从这里开始该怎么做。该html文件使用组件中的数据（使用来自rails后端的数据），因此它不是静态文件。我只找到了用于显示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

角度6：使用数据绑定从html + sass文件渲染pdf文件

0 个答案: