Question

我正在尝试将一个巨大的div保存为PDF文件。在完成整个保存过程之前，我正在使用* ngIf（和布尔值isExport）删除该div的一些平衡块。

正确的是，当我选择功能DownloadPage（）时，我要删除的栏杆消失了，但是当文件被保存时，它们仍然存在。怎么来的？

我应该调用delay方法给DOM时间更新吗？

public downloadPage(): void {
  this.isExport = true;
  this.withoutFloorDetailsBlock = true;

  var data = document.getElementById('plan-cp');
  html2canvas(data).then(canvas => {
    // Few necessary setting options  
    var imgWidth = 208;
    var pageHeight = 295;
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;

    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
    var position = 0;
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
    let now = new Date();
    let date = formatDate(now,"MMddyyyy",'en-EN');
    let name = this.asset.property_name + '_plan_' + date + '.pdf';
    pdf.save(name); // Generated PDF   
  });
}

Answer 1

就像您说的那样，您需要延迟一些时间来刷新页面（提升周期），在大多数情况下，使用setTimeout可以做到这一点

      this.isExport = true;

      setTimeout( () => {
        this.withoutFloorDetailsBlock = true;

        var data = document.getElementById('plan-cp');
        html2canvas(data).then(canvas => {
          // Few necessary setting options  
          const imgWidth = 208;
          const pageHeight = 295;
          const imgHeight = canvas.height * imgWidth / canvas.width;
          const heightLeft = imgHeight;

          const contentDataURL = canvas.toDataURL('image/png')
          let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
          const position = 0;
          pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
          let now = new Date();
          let date = formatDate(now,"MMddyyyy",'en-EN');
          let name = this.asset.property_name + '_plan_' + date + '.pdf';
          pdf.save(name); // Generated PDF   
        });
      });

ngIf在将div保存为PDF之前似乎无法及时工作

1 个答案: