Angular 14中使用jsPDF报错：dompurify未定义的解决求助

步骤1：确认依赖安装完整性 #

先确保相关依赖已正确安装到项目，执行命令：

npm install dompurify canvg html2canvas --save

步骤2：修改Angular构建配置（angular.json） #

在angular.json的build配置项的scripts数组中，添加依赖的脚本引入路径：

"build": {
  "options": {
    // 其他原有配置
    "scripts": [
      "node_modules/dompurify/dist/purify.min.js",
      "node_modules/html2canvas/dist/html2canvas.min.js",
      "node_modules/canvg/dist/browser/canvg.min.js"
    ]
  }
}

步骤3：修正自定义Webpack配置的externals映射 #

如果使用自定义Webpack配置文件，将externals中的dompurify映射改为浏览器全局变量DOMPurify（注意大小写）：

module.exports = {
    // 其他原有配置
    externals: {
      canvg: "canvg",
      html2canvas: "html2canvas",
      dompurify: "DOMPurify"
    }
};

步骤4：组件内正确引入并全局挂载 #

在使用jsPDF的组件中，按如下方式引入并全局挂载依赖：

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import DOMPurify from 'dompurify';

// 挂载到全局，避免局部作用域找不到
(window as any).DOMPurify = DOMPurify;
(window as any).html2canvas = html2canvas;

// 正常使用jsPDF生成PDF
const doc = new jsPDF();
// 你的PDF生成逻辑代码

步骤5：清理缓存并重新构建 #

执行命令清理缓存后重启构建：

ng cache clean
ng build --watch

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