Angular 10集成jsPDF+jsPDF-AutoTable后prod打包失败求助

针对Angular 10.2.0 + Node.js 14.21.2环境下，引入jsPDF（^{2.5.1）和jsPDF-AutoTable（}3.5.28）后开发正常但生产打包失败的问题，可尝试以下解决方案：

方案1：增加打包进程内存限制 #

该错误常因Webpack打包时内存不足触发，通过设置Node.js内存上限解决：

NODE_OPTIONS="--max-old-space-size=8192" ng build --prod

（8192代表分配8GB内存，可根据机器配置调整为4096或16384）

方案2：禁用差异加载（Differential Loading） #

差异加载生成ES5和ES2015双版本包时，可能对jsPDF类库的转译出现异常，可在angular.json的build配置中关闭：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "differentialLoading": false,
          // 其他原有配置...
        }
      }
    }
  }
}

方案3：调整jsPDF和AutoTable的导入方式 #

改用UMD版本的库文件，规避转译兼容性问题：

// pdf.component.ts
import jsPDF from 'jspdf/dist/jspdf.umd.min.js';
import 'jspdf-autotable/dist/jspdf.plugin.autotable.min.js';

getPDF() {
  const doc = new jsPDF();
  // 直接通过doc实例调用autoTable，无需单独导入autoTable变量
  doc.autoTable({
    startY: 35,
    theme: 'plain',
    tableLineWidth: 0.1,
    tableLineColor: '#777',
    head: [...],
    body: [...]
  });
  doc.output('pdfobjectnewwindow');
}

方案4：修改TypeScript配置 #

在tsconfig.json中添加跳过库类型检查的配置，同时可将编译目标调整为ES5（无需差异加载时）：

{
  "compilerOptions": {
    // 其他原有配置...
    "skipLibCheck": true,
    "target": "es5"
  }
}

方案5：声明允许CommonJS依赖 #

在angular.json的build配置中标记允许CommonJS类型的依赖，避免转译报错：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "allowedCommonJsDependencies": ["jspdf", "jspdf-autotable"],
          // 其他原有配置...
        }
      }
    }
  }
}

方案6：调整依赖版本 #

Angular 10属于较旧版本，可能与最新版jsPDF存在兼容性问题，尝试降级到兼容版本：

npm uninstall jspdf jspdf-autotable
npm install jspdf@2.3.1 jspdf-autotable@3.5.23

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