用角度的jspdf将完整的html页面转换为pdf

时间:2018-11-16 09:54:49

标签: html angular pdf-generation

我正在尝试生成完整html页面的pdf,但问题是它仅占用1个div,我的问题是是否有可能生成该div中的所有内容,所以我的意思是其中的其他div ?是否也可以将CSS与它一起使用?在下面,您会找到html代码

true

    

下面您将找到使用jspdf生成pdf的代码

<button (click)="downloadPDF()">Export to PDF</button>
<div #content class="container">
<div class="row">
<div class="col-lg-12 ">
  <ul class="timeline">
    <li class="firstLi">
      <div class="timeline-image">
        <img class="img-circle img-responsive" 
         src="../../assets/startscherm.JPG" alt="">
      </div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="subheading">Startscherm</h4>
        </div>
        <div class="timeline-body">
          <p class="text-muted links">

            Hiernaast ziet u het startscherm. Hier vindt u een uitleg over wat de app inhoud. Welke beurzen er zijn enzovoort.
            Linksboven dit scherm ziet u het hamburgermenu met volgende opties: home, mijn groepen, beursplan, exposanten en instellingen.
            Met de knop (het mannetje rechtsboven) kan u naar het instellingen scherm gaan indien u wenst uit te loggen of iets wenst aan te passen aan uw account.
            Wanneer de rondleiding kan beginnen zal de onderste knop (waar nu staat "wachten op de leerkracht") Veranderen in "rondleiding starten". Door op deze knop te duwen zal de rondleiding starten.Hierover later meer.
          </p>
        </div>
      </div>
      <div class="line"></div>
    </li>
    <li class="timeline-inverted">
      <div class="timeline-image">
        <img class="img-circle img-responsive" src="../../assets/beursplan.JPG" alt="">
      </div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="subheading">Beursplan</h4>
        </div>
        <div class="timeline-body">
          <p class="text-muted rechts">
            Klikken we bij het hamburgermenu op beursplan, dan krijgen we een plan te zien van hoe de beursstanden zijn geplaatst. Men kan dit tijdens de rondleiding gebruiken
            om plaatsen terug te vinden. Deze nummers komen overeen met de nummers die u tijdens uw rondleiding krijgt.
          </p>
        </div>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="timeline-image">
        <img class="img-circle img-responsive" src="../../assets/Categorieën.JPG" alt="">
      </div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="subheading">Categorieën</h4>
        </div>
        <div class="timeline-body">
          <p class="text-muted links">
            Bij het klikken in het hamburgermenu op categoriëen komt een scherm tevoorschijn (links), met alle te bezoeken mogelijkheden.
            Dit kan u helpen bij het maken van een beslissing wat uw voorkeur is om te bezichtigen. Indien u klikt op een van deze categoriëen krijgt u extra details over de categorie zelf.
            Waardoor we u al van informatie verschaffen om een doorslaggevende keuze te kunnen maken.              </p>
        </div>
      </div>
      <div class="line"></div>
    </li>
    <li class="timeline-inverted">
      <div class="timeline-image">
        <img class="img-circle img-responsive" src="../../assets/keuzeRondleiding.JPG" alt="">
      </div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="subheading">Keuze rondleiding</h4>
        </div>
        <div class="timeline-body">
          <p class="text-muted rechts">
            Men kan in het scherm rechts aangeven welke categoriëen men het liefste zou bezoeken. Hieruit zal een keuze worden gemaakt zodat de aangegeven voorkeuren zeker kunnen worden bezocht tijdens de rondleiding.
            We zullen hier zoveel mogelijk rekening mee proberen houden.
          </p>
        </div>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="timeline-image">
        <img class="img-circle img-responsive" src="../../assets/rondleiding.JPG" alt="">
      </div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="subheading">Rondleiding</h4>
        </div>
        <div class="timeline-body">
          <p class="text-muted links">
            Bij het klikken van rondleiding starten (zie eerste alinea). Word in dit scherm de rondleiding gestart met de eerste exposant.
            Op de kaart wordt weergegeven waar deze zich bevindt. Dan kan u de vraag en eventueel een foto ingeven en op volgende duwen waarbij u verder gaat met uw rondleiding.
            Bij de laatste vraag komt u terecht op het eindscherm. Dit betekent dat u uw rondleiding heeft beeïndigt en u mag zich begeven naar het afgesproken samenkomstpunt.              </p>
        </div>
      </div>
    </li>
  </ul>
</div>

}

0 个答案:

没有答案