动态加载html2canvas报Cannot find name 'html2canvas'.ts(2304)如何解决？

这个报错是TypeScript未识别到动态加载后全局挂载的html2canvas变量导致的，可通过以下任意一种方式解决：

方案1：临时声明变量（最快实现） #

在调用html2canvas的TS文件顶部添加全局变量声明：

// 不需要类型提示可以直接声明为any
declare const html2canvas: any;

如果需要完整类型提示，先安装类型包：

npm install @types/html2canvas -D

再修改声明为：

declare const html2canvas: typeof import('html2canvas').default;

方案2：显式从window对象调用 #

动态加载的库默认挂载到全局window对象，直接指定window调用即可跳过报错：

// 不需要类型提示的写法
(window as any).html2canvas(parentEle, { allowTaint: true }).then((canvas: HTMLCanvasElement) => {
  const image = canvas.toDataURL("image/png");
});

方案3：全局类型声明（项目级规范方案） #

在项目的全局类型声明文件（如typings.d.ts、vite-env.d.ts等）中添加全局类型定义，后续全项目调用都不需要单独声明：

1. 先安装类型包：

npm install @types/html2canvas -D

2. 在全局声明文件中添加以下内容：

import type html2canvas from 'html2canvas';

declare global {
  interface Window {
    html2canvas: typeof html2canvas;
  }
}

额外注意事项 #

建议在script的onload回调中调用html2canvas，避免资源未加载完成导致的运行时报错：

const script = document.createElement("script");
script.type = "text/javascript";
script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js';
script.onload = () => {
  // 加载完成后再执行逻辑
  window.html2canvas(parentEle, { allowTaint: true }).then((canvas) => {
    const image = canvas.toDataURL("image/png");
  })
}
document.head.appendChild(script)

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