Ionic框架使用PDFMake生成PDF后切换页面报错如何解决？

你当前出现路由跳转后报错的核心原因是PDFMake生成、下载PDF过程中会在全局上下文挂载临时资源、异步回调，你仅清理了组件内的pdfObj引用，没有释放PDFMake的全局残留，路由切换后残留的异步回调找不到原组件执行上下文就会抛出异常。

• 方案1：避免把pdfObj挂载到组件实例上，改为局部变量执行完就自动销毁，不需要手动置空
  把generatePdf方法调整为如下写法：

  generatePdf(){
      let docDefinition = {
        pageSize: "A3",
        content: [
          // 原有业务内容
        ],
      }
      // 直接用局部变量存储实例，不挂载到this上，方法执行完后会自动被GC回收
      const pdfObj = pdfMake.createPdf(docDefinition);
      pdfObj.download();
  }
  

  同时删除原来ionViewWillLeave生命周期里的pdfObj置空逻辑即可。

• 方案2：手动清理PDFMake的全局残留
  如果业务场景确实需要保留pdfObj实例，就在页面离开时额外清理全局挂载的临时资源：

  ionViewWillLeave(){
      if(this.pdfObj) {
        // 销毁pdfObj内部的缓存资源
        delete this.pdfObj;
        this.pdfObj = null;
      }
      // 清理PDFMake生成的临时预览iframe
      const pdfIframes = document.querySelectorAll('iframe[title*="PDFMake"]');
      pdfIframes.forEach(iframe => iframe.remove());
      // 清理window上挂载的PDFMake临时回调函数
      Object.keys(window).forEach(key => {
        if(key.startsWith('pdfMake')) delete window[key];
      })
  }
  

• 方案3：升级PDFMake到最新稳定版，旧版本PDFMake存在已知的内存泄漏、全局资源未自动清理的问题，升级后可直接规避该类问题。

内容的提问来源于stack exchange，提问作者WatsMyName