Как добавить элемент, который не отображается или не отображается в PDF, созданном с использованием jspdf (вместе с html2canvas)

Question

Предположим, у меня есть два элемента, которые отображаются условно в зависимости от маршрута.Но при создании документа PDF я хочу добавить оба элемента на разных страницах с общим заголовком для обеих страниц.

Я попытался изменить маршрут, а затем добавить изображения захваченной страницы в документ PDF.Но это вызывает мерцание на экране с дополнительной задачей по отслеживанию текущего состояния страниц.

Родительский компонент

     <div id="print-container">
            <h2>Document Header</h2>
            <div class="tabs-wrapper">
                <a class="tabs" routerLink="/one">
                    First
                </a>
                <a class="tabs" routerLink="/two">
                    Second
                </a>
            </div>
            <router-outlet></router-outlet>
    </div>

Первый компонент

<span> Displaying First </span>

Второй компонент

<span> Displaying Second </span>

Угловой код в Родителе

    let pdf = jsPDF({
      orientation: "landscape", 
      format: "a3"
    });
    let currentRoute = this.router.url;
    let container = document.getElementById("print-container");
    this.router.navigateByUrl("/one");
    await html2canvas(container).then(canvas => {
      let imgData = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData, 0, 0);
      pdf.addPage();
    });
    this.router.navigateByUrl("/two");
    await html2canvas(container).then(canvas => {
      let imgData = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData, 0, 0);
    });

    this.router.navigateByUrl(currentRoute);
    pdf.save("DOC");

Я ожидаю создать PDF как

Document Header
Displaying First

Document Header
Displaying Second