ionic-framework - 将 dom 转换为图像时隐藏 div

Question

我目前正在使用domtoimage库打印（ios 设备）并在桌面上下载为 PDF

HTML：

<div class="row button__center" *ngIf="btnDownloaderVisible">
    <div>
      <ion-row>
        <ion-col size="6" class="ion-text-right">
          <div class="form-group">
            <button class="btn btn-block btn" (click)="printScenario()" *ngIf="platformModeDevice">
              <ion-icon name="download-outline"></ion-icon>&nbsp;  Print </button>
            <button class="btn btn-block btn" (click)="printScenario()" *ngIf="!platformModeDevice">
            <div class="icon">
              <i class="mdi mdi-download"></i>
            </div
            >&nbsp;Download </button>
          </div>
        </ion-col>
        <ion-col size="6" class="ion-text-left">
          <div class="form-group">
            <button class="btn btn-block btn" (click)="sendMailScenario()">
              <ion-icon name="mail-outline"></ion-icon>
              &nbsp; Send</button>
          </div>
        </ion-col>
      </ion-row>
    </div>
  </div>

TS：

async printScenario() {
      let loading = await this.loadingController.create({
            message:'Generating...',
            animated:true,
            spinner:'dots',
            mode:'ios'
      });
      try {
              this.btnDownloaderVisible = false;
              console.log(this.btnDownloaderVisible);
              loading.present();
              var node = document.getElementById('pdfContainer');
              var img;
    var currentdate = new Date(); 
    var filename = this.currentScenario.companyId.name + "-" +currentdate.getDate() + "-" + (currentdate.getMonth()+1)  + "-" + currentdate.getFullYear() ;
    var newImage;
              domtoimage.toPng(node, { bgcolor: '#fff', height:1024 })
                .then((dataUrl)  => {
                  img = new Image();
                  img.src = dataUrl;
                  newImage = img.src;
                  if(this.platform.is('ios') || this.platform.is('iphone') || this.platform.is('ipad')) {
                    let options: PrintOptions = {
                      name: 'Simulator',
                      duplex: true,
                      orientation: 'landscape',
                      monochrome:false
                      }
                      newImage = newImage.replace('data:image/png;base64,','base64://');
                      this.printer.print(newImage, options).then(()=> {
                      }, (err:any)=> {
                      });
                  } else {
                    img.onload = function () {
                      var pdfWidth = img.width;
                      var pdfHeight = img.height;
                      var doc;
                      if(pdfWidth > pdfHeight)
                      {
                        doc = new JSPDF('l', 'px', [pdfWidth , pdfHeight]);
                      }
                      else
                      {
                        doc = new JSPDF('p', 'px', [pdfWidth , pdfHeight]);
                      }
                      var width = doc.internal.pageSize.getWidth();
                      var height = doc.internal.pageSize.getHeight();
                      doc.addImage(newImage, 'PNG',  10, 10, width, height);
                      doc.save(filename);
                      loading.dismiss();
                    }
                  }
                })
                .catch((error) =>{}).finally(()=> {
                  loading.dismiss();
                  this.btnDownloaderVisible = true;
                  console.log(this.btnDownloaderVisible)
                });
      } catch(e) {
        loading.dismiss();
        this.utils.showAlert('Unable to process request, please try again');
      }
  }

正如您在 HTML 的第一个 div 中看到的那样*ngIf="btnDownloaderVisible"

所以我想在打印函数之前隐藏这个 div，所以在函数中，我 this.btnDownloaderVisible = false;在try. 因此，当我运行该功能时，它会正确地从 HTML 中隐藏按钮，但在结果（打印视图）或 pdf 文件中，它不会隐藏它。我究竟做错了什么？

标签： ionic-frameworkionic4