Question

我正在使用角度应用程序，我应该以pdf格式导出页面。

在pdf上与网页不同的模板。

为此，我将创建一个自定义html，然后使用html2canvas将html转换为我添加到pdf文件的图像。

我的问题是应该在现有的html上调用document.getElementById();才能将其转换为图像。

但这些自定义html元素不应出现在网页中。

期望值：我想知道如何将自定义html添加到pdf中而不将其添加到html页面的正文中。

我的解决方法是仅在单击导出为pdf时显示自定义html

HTML页面

  <div id="filters" *ngIf="exportPdfService.inExport">
    <span class="badge badge-secondary">..</span> <span class="badge badge-secondary">..</span> <span class="badge badge-secondary">..</span>
  </div>

然后在我的 Ts

中

exportPDF() {
    this.exportPdfService.inExport = true;
    const elm = this.logoActivity.nativeElement.src;
    const filtersElm = document.getElementById('filters');
    const logo = html2canvas(filtersElm).then(canvas => {
        pdf.addImage(canvas, 'png', 150, 45, canvas.width / 2, canvas.height / 2);
        pdf.save(`file_.pdf`);
    });
}

但是在导出时，可以看到流程元素。

我正在寻找一种在后台创建自定义html的方法

添加到pdf自定义html而不将其添加到DOM

0 个答案: