Vfrdtyky

I am trying to generate a pdf of the complete html page but the problem is that it only takes 1 div and my question is if it is possible to generate everything that is also in that div so i mean the other divs in it ? Is it also possible to takes the css with it or is that not possible ? below you find the html code

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

Below you find the code to generate a pdf with jspdf

  public downloadPDF() {

 let doc = jsPDF();



  let specialElementHandlers = {

    '#editor': function (element, renderer) {

      return true;

    }

  };



  let content = this.content.nativeElement;

  doc.

  doc.fromHTML(content.innerHTML, 15, 15, {

    'width': 190,

    'elementHandlers': specialElementHandlers

  });



  doc.save('informatiescherm.pdf');

}