javascript - 如何添加在使用 jspdf 创建的 pdf 中不可见或未呈现的元素（以及 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>

Parent 中的 Angular 代码

    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

标签： javascriptangularpdf-generationjspdfhtml2canvas