title: domToPdf is blank
body: <p>I am using the dom-to-pdf library, repository here: <a href="https://github.com/ovvn/dom-to-pdf" rel="nofollow noreferrer">https://github.com/ovvn/dom-to-pdf</a></p>
  <p>I have the following method that:</p>
  <ol>
  <li>Hits the server for data</li>
  <li>Dynamically builds a variable based on that data</li>
  <li>Call <code>domToPdf</code> to print the DOM</li>
  </ol>
  <p>The component's HTML layer uses <code>*ngFor</code> to dynamically populate the DOM based on the variable is step 2.</p>
  <p>This is my method:</p>
  <pre class="lang-js prettyprint-override"><code>generateReport(): void {
    let bloodPressureFilter = `${this.bloodPressure.readDateFrom ? `ReadDate_GreaterEqual=${encodeURIComponent(this.datePipe.transform(this.bloodPressure.readDateFrom, 'YYYY-MM-dd'))}` : ''}`;
    bloodPressureFilter = `${bloodPressureFilter ? '&amp;' : ''}${this.bloodPressure.readDateTo ? `ReadDate_LessEqual=${encodeURIComponent(this.datePipe.transform(this.bloodPressure.readDateTo, 'YYYY-MM-dd'))}` : ''}`;
    let sugarFilter = `${this.sugar.readDateFrom ? `ReadDate_GreaterEqual=${encodeURIComponent(this.datePipe.transform(this.sugar.readDateFrom, 'YYYY-MM-dd'))}` : ''}`;
    sugarFilter = `${sugarFilter ? '&amp;' : ''}${this.sugar.readDateTo ? `ReadDate_LessEqual=${encodeURIComponent(this.datePipe.transform(this.sugar.readDateTo, 'YYYY-MM-dd'))}` : ''}`;
    let weightFilter = `${this.weight.readDateFrom ? `ReadDate_GreaterEqual=${encodeURIComponent(this.datePipe.transform(this.weight.readDateFrom, 'YYYY-MM-dd'))}` : ''}`;
    weightFilter = `${weightFilter ? '&amp;' : ''}${this.weight.readDateTo ? `ReadDate_LessEqual=${encodeURIComponent(this.datePipe.transform(this.weight.readDateTo, 'YYYY-MM-dd'))}` : ''}`;
    forkJoin({
      bloodPressures: this.bloodPressureService.query(bloodPressureFilter),
      sugars: this.sugarService.query(sugarFilter),
      weight: this.weightService.query(weightFilter)
    }).subscribe(results =&gt; {
      this.records = [];
      const bloodPressures = this.bloodPressure.visible ? results.bloodPressures : [];
      const sugars = this.sugar.visible ? results.sugars : [];
      const weights = this.weight.visible ? results.weight : [];
  
      bloodPressures.forEach(bloodPressure =&gt; {
        const grouppedObject = this.records.find(record =&gt; record.entryDate === bloodPressure.ReadDate);
        if (!grouppedObject) {
          this.records.push({
            entryDate: bloodPressure.ReadDate,
            bloodPressures: [ bloodPressure ]
          });
        } else {
          grouppedObject.bloodPressures = grouppedObject.bloodPressures ?? [];
          grouppedObject.bloodPressures.push(bloodPressure);
        }
      });
      sugars.forEach(sugar =&gt; {
        const grouppedObject = this.records.find(record =&gt; record.entryDate === sugar.ReadDate);
        if (!grouppedObject) {
          this.records.push({
            entryDate: sugar.ReadDate,
            sugars: [ sugar ]
          });
        } else {
          grouppedObject.sugars = grouppedObject.sugars ?? [];
          grouppedObject.sugars.push(sugar);
        }
      });
      weights.forEach(weight =&gt; {
        const grouppedObject = this.records.find(record =&gt; record.entryDate === weight.ReadDate);
        if (!grouppedObject) {
          this.records.push({
            entryDate: weight.ReadDate,
            weights: [ weight ]
          });
        } else {
          grouppedObject.weights = grouppedObject.weights ?? [];
          grouppedObject.weights.push(weight);
        }
      });
      const today = new Date();
      const element = document.getElementById('report');
      const options = {
        filename: `${this.datePipe.transform(today, 'yMMdhhmmssa')}.pdf`
      };
      domToPdf(element, options, () =&gt; {
        console.log('PDF exported');
        this.records = [];
      });
    });
  }
  </code></pre>
  <p>And this is my component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;report&quot; *ngIf=&quot;records&quot;&gt;
    &lt;ion-card *ngFor=&quot;let record of records&quot;&gt;
      &lt;ion-card-header&gt;
        &lt;ion-card-title&gt;{{record.entryDate | date:'MMMM d, y'}}&lt;/ion-card-title&gt;
      &lt;/ion-card-header&gt;
      &lt;ion-card-content&gt;
        &lt;p *ngFor=&quot;let sugar of record.sugars&quot;&gt;At {{sugar.ReadTime | date:'h:mm a'}}, I had a blood sugar reading of {{sugar.Reading}}.&lt;/p&gt;
        &lt;p *ngFor=&quot;let bloodPressure of record.bloodPressures&quot;&gt;At {{bloodPressure.ReadTime | date:'h:mm a'}}, I had a blood pressure reading of {{bloodPressure.Systolic}}/{{bloodPressure.Diastolic}}.&lt;/p&gt;
        &lt;p *ngFor=&quot;let bloodPressure of record.weights&quot;&gt;At {{weight.ReadTime | date:'h:mm a'}}, I weighed {{weight.Weight}}.&lt;/p&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The issue (I think) is that because it is taking the document too long to dynamically generate the HTML it is downloading a blank PDF. The reason I say this is because if I remove the code above where I set the options and call <code>domToPdf</code> and replace my HTML with <code>&lt;h2&gt;TEST&lt;/h2&gt;</code> then a PDF is exported with the content.</p>
  <p>Is there a work around so that the massaged data gets exported?</p>