时间戳

首页 > 解决方案 > 在打印和下载 pdf 时显示微调器

angular - 在打印和下载 pdf 时显示微调器

问题描述

我想在客户端等待后端发送带有base64string的响应时显示微调器，然后将其显示为像pdf一样打印。我在 Angular 应用程序中为此使用了简单的 JavaScript。微调器的所有逻辑都已实现。问题是当我调用 print 方法时，它看起来发生得非常快，或者没有等待 foreach 循环完成。如果我评论 foreach 逻辑并删除 false 以结束微调器正在工作。

    print() {

    //Must start spinner
    this.sharedService.loadingSpinner = true;

    selectedDocuments.forEach((x) => {
      this.calculator.printPolicy(policyId, x).subscribe((res) => {
        const base64str = res["bBlob_PDF"];
        const binary = atob(base64str.replace(/\s/g, ""));
        const len = binary.length;
        const buffer = new ArrayBuffer(len);
        let view = new Uint8Array(buffer);
        for (let i = 0; i < len; i++) {
          view[i] = binary.charCodeAt(i);
        }
        let theBlob = new Blob([view], { type: "application/pdf" });
        let URLObject = URL.createObjectURL(
          new Blob([view], { type: "application/pdf" })
        );
        window.open(URLObject, "_blank");
        let a = document.createElement("a");
        a.href = URLObject;
        a.download = "MyHome_" + policyId + ".pdf";
        //a.click();
      });      
    });
    //Must stop the spinner when all is finished
    this.sharedService.loadingSpinner = false;
    this.hasBeenPrinted = true;
  }

标签： angularrxjsobservable

解决方案

您可以通过使用 将所有打印可观察对象链接在一起来实现这一点forkJoin，然后订阅其可观察对象，该可观察对象仅在所有子可观察对象完成后才会发出值，您可以在此订阅函数中停止微调器。

尝试以下操作：

print() {

  //Must start spinner
  this.sharedService.loadingSpinner = true;

  forkJoin(
    selectedDocuments.map((x) =>
      this.calculator.printPolicy(policyId, x).pipe(
        tap((res) => {
          const base64str = res['bBlob_PDF'];
          const binary = atob(base64str.replace(/\s/g, ''));
          const len = binary.length;
          const buffer = new ArrayBuffer(len);
          let view = new Uint8Array(buffer);
          for (let i = 0; i < len; i++) {
            view[i] = binary.charCodeAt(i);
          }
          let theBlob = new Blob([view], { type: 'application/pdf' });
          let URLObject = URL.createObjectURL(
            new Blob([view], { type: 'application/pdf' })
          );
          window.open(URLObject, '_blank');
          let a = document.createElement('a');
          a.href = URLObject;
          a.download = 'MyHome_' + policyId + '.pdf';
          //a.click();
        })
      )
    )
  ).subscribe(() => {
    // Stop the spinner when all is finished
    this.sharedService.loadingSpinner = false;
    this.hasBeenPrinted = true;
  });
}

推荐阅读