javascript - 在Angular2项目中使用jspdf导出动态生成的div的问题

Question

我正在使用 jspdf 打印项目中的 div 。我最近意识到，当 div 包含一些动态内容时，这不会打印。我的意思是，如果有一个简单的 Angular if 语句，jspdf 不会打印它。这是一个示例:

在我的 HTML 中:

<div id="content" #content>
   <p>This sections is printed</p>
   <p> {{ item.id }} is also printed</p>
</div>

下面的代码抛出错误，可以在 html 代码下面找到:

<div id="content" #content>
   <p *ngIf="item.id === 'sample'">this is NOT printed</p>
</div>

ERROR TypeError: Cannot read property '1' of undefined at f.renderParagraph (jspdf.min.js:97)...

这是我使用的 typescript 代码:

@ViewChild('content') content: ElementRef;    
public downloadPDF () {
    const doc = new jsPDF();
    const specialElementHandlers = {
      '#editor': function(element, renderer) {
        return true;
      }
    };
    const content = this.content.nativeElement;
    doc.fromHTML(content.innerHTML, 15, 15, {
      'width': 190,
      'elementHandlers': specialElementHandlers
    });

    const fileName = 'test';
    doc.save(fileName + '.pdf');
}

第一个 div 再次打印为 pdf 就好了。但第二个 div 没有。我怀疑这个问题是 Angular if 语句。但我还没有找到解决方案。任何帮助将不胜感激。

Answer 1

不要使用结构指令尝试这个

隐藏属性绑定(bind)

<div id="content" #content>
   <p [hidden]="item.id !== 'sample'">this is NOT printed</p>
</div>