javascript - 从 html 代码(在另一个组件上)以 Angular 2 制作 pdf

Question

我有一个名为 parentComponent 的组件，它有一个按钮 downloadPDF，当我单击此按钮时，我想从另一个名为 childComponent 的 HTML 代码下载 pdf，而不在屏幕上显示它。

我已经完成了，但是它在屏幕上显示了 childComponent 的 HTML 代码。我不想做的事。

我的 childComponent 代码是:

@Component({
  selector: 'app-child',
  templateUrl: '<div id="pdfData">this is small html code mine is big one</div>',
  styleUrls: ['./childComponent.component.css']
})
export class childComponent implements OnInit {

  constructor() { }
  ngOnInit() { }
  generatePDFChild() {
    const elementToPrint = document.getElementById('pdfData');
    const pdf = new jsPDF();
    pdf.addHTML(elementToPrint, () => {
      pdf.save('test.pdf');
    });

  }

parentComponent 其中包含 downloadButton:

@Component({
  selector: 'app-parent',
  templateUrl: '<app-child></app-child><a (click)="generatePDFParent()">Download PDF</a>',
  styleUrls: ['./parentComponent.component.css']
})

export class parentComponent implements OnInit {
@ViewChild(childComponent)
  private childComponentParent: childComponent;
constructor() { }
ngOnInit() { }
generatePDFParent() {

     this.childComponentParent.generatePDFChild();

  }
}

Answer 1

代码的问题是你在父组件中添加了子组件选择器。

如果您不想随时显示内容。通过将 CSS 用作 display:none 或在生成 pdf 之前隐藏它来隐藏 div 标签；

generatePDFChild() {
    const elementToPrint = document.getElementById('pdfData');
    const pdf = new jsPDF();
    pdf.addHTML(elementToPrint, () => {
      pdf.save('test.pdf');
    })
elementToPrint .style.display="none"
}