替换html2canvas为html2canvas-pro后报错TypeError，如何替代原bundle？

之前使用捆绑版html2pdf.bundle.min.js（0.9.3版）生成PDF完全正常，但旧版内置的html2canvas遇到oklch()或display-p3()等现代CSS颜色格式时会崩溃，因此尝试替换为html2canvas-pro，替换后的脚本引入如下：

<script src="https://cdn.jsdelivr.net/npm/html2canvas-pro@latest/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.min.js"></script>

保留原有生成PDF的JS代码：

const opt = {
        margin: 0,
        filename: "frontend-export.pdf",
        image: { type: "jpeg", quality: 1 },
        html2canvas: {
            scale: 2,
            useCORS: true,
            logging: false,
            windowWidth: realWidth,
            windowHeight: realHeight,
        },
        jsPDF: {
            unit: "px",
            format: [realWidth, realHeight],
            orientation: "portrait",
            compress: false,
        },
    };

// Generate and download PDF
await html2pdf().set(opt).from(wrapper).save();

在Chrome 130+中出现运行时错误：Uncaught (in promise) TypeError: r is not a function，现咨询以下问题：

问题解答 #

1. 仅引入三个脚本能否替代旧版html2pdf.bundle.min.js？ #

不能。html2pdf.bundle.min.js是将html2canvas、jsPDF和html2pdf核心逻辑打包整合的版本，内部有固定的依赖引用机制。单独引入三个脚本时，html2pdf.js 0.9.3会优先尝试调用它预期内置的html2canvas版本，而非你全局引入的html2canvas-pro，导致依赖不匹配，触发类型错误。

2. 若不能，如何在不修改原代码的情况下正确集成二者？ #

核心是让html2pdf.js识别并使用全局的html2canvas-pro，同时适配jsPDF的全局对象暴露方式，具体步骤如下：

• 严格按照先html2canvas-pro、再jsPDF、最后html2pdf.js的顺序引入脚本
• 在引入html2pdf.js之前，添加一段适配代码，将全局对象调整为html2pdf.js预期的格式：

// 让html2pdf使用全局的html2canvas-pro
window.html2canvas = html2canvas;
// 适配jsPDF UMD版本的全局对象（html2pdf需要首字母大写的jsPDF）
window.jsPDF = jspdf.jsPDF;

完整的脚本引入代码如下：

<script src="https://cdn.jsdelivr.net/npm/html2canvas-pro@latest/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
window.html2canvas = html2canvas;
window.jsPDF = jspdf.jsPDF;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.min.js"></script>

这样无需修改原有生成PDF的JS代码，即可正常使用html2canvas-pro处理现代CSS颜色，同时保留原有的PDF生成逻辑。

3. 二者是否存在已知兼容性问题？ #

• html2canvas-pro基于原版html2canvas开发，核心API和逻辑与原版一致，和html2pdf.js 0.9.3的核心流程兼容，你使用的配置参数（如scale、useCORS等）都是原版支持的，不会出现兼容性问题。
• 需注意：html2pdf.js 0.9.3是较旧的版本，若html2canvas-pro新增了原版没有的API，html2pdf可能无法调用，但这对你当前的使用场景无影响。
• jsPDF 2.5.1与html2pdf.js 0.9.3兼容性良好，只要正确暴露jsPDF全局对象即可。

内容的提问来源于stack exchange，提问作者Hiếu Bùi Quang