使用jsPDF v2.4.0生成PDF时触发TypeError错误求助

这个TypeError: Method Promise.prototype.then called on incompatible receiver错误的核心原因是：jsPDF 2.x版本依赖原生ES6 Promise，但你的AngularJS+RequireJS环境中，全局Promise对象可能被AngularJS的$q覆盖，或者环境本身没有提供标准的原生Promise实现，导致jsPDF调用Promise方法时出现接收者不兼容的问题。

以下是具体的排查和解决步骤：

1. 引入Promise Polyfill（针对老浏览器/无原生Promise的环境） #

如果你的运行环境是老浏览器（比如IE），或者没有原生Promise支持，先引入ES6 Promise的polyfill，并确保它在jsPDF之前加载：

• 先安装es6-promise包，然后在RequireJS配置中添加依赖：

  require.config({
    paths: {
      'es6-promise': 'lib/es6-promise.min',
      'jspdf': 'lib/jspdf.min'
    },
    shim: {
      'jspdf': {
        deps: ['es6-promise']
      }
    }
  });
  

• 在模块加载时，先初始化polyfill：

  require(['es6-promise', 'jspdf'], function(ES6Promise, jsPDF) {
    // 启用polyfill
    ES6Promise.polyfill();
    // 你的jsPDF代码逻辑
    const doc = new jsPDF.jsPDF({ unit: 'pt', putOnlyUsedFonts: true});
    // ... 后续代码
  });
  

2. 临时恢复原生Promise（解决AngularJS $q覆盖问题） #

很多AngularJS项目会把$q挂载为全局Promise，这会和jsPDF依赖的原生Promise冲突。可以在执行jsPDF代码前后，临时切换全局Promise：

// 保存当前全局Promise（可能是AngularJS的$q）
const originalPromise = window.Promise;
// 强制切换为原生Promise
window.Promise = Promise;

// 你的jsPDF核心代码
const doc = new jsPDF.jsPDF({ unit: 'pt', putOnlyUsedFonts: true});
const pdfElement = document.getElementById('id');
const pdfName = 'Test.pdf';
doc.html(pdfElement, {
    callback: (pdf) => {
      pdf.save(pdfName);
      // 执行完成后恢复原来的Promise
      window.Promise = originalPromise;
    },
    margin: 20,
});

3. 检查jsPDF的加载与构造方式 #

• 确认RequireJS加载的jsPDF版本正确（2.4.0），且模块暴露的构造函数正确。部分场景下，jsPDF的全局构造函数是jsPDF而非jsPDF.jsPDF，可以尝试修改构造代码：

  // 替换原来的构造方式
  const doc = new jsPDF({ unit: 'pt', putOnlyUsedFonts: true});
  

• 确保jsPDF依赖的html2canvas已正确加载（jsPDF的html方法依赖html2canvas），版本需和jsPDF 2.4.0兼容（推荐html2canvas 1.4.1及以上版本）。

4. 验证Promise环境 #

在执行jsPDF代码前，先打印全局Promise的类型，确认是否为原生Promise：

console.log(window.Promise);
console.log(window.Promise === Promise); // 应为true才是原生Promise

内容的提问来源于stack exchange，提问作者Renjith P N