使用html2canvas报错‘html2canvas is not a function’求助

问题根源 #

你当前的导入逻辑存在冲突：既在HTML中直接引入了html2canvas模块，又在projname.js里用import * as html2canvas重复导入，导致变量作用域混乱，且最新版html2canvas采用默认导出而非命名导出，你的导入方式不匹配。

修正步骤 #

1. 移除HTML中的多余脚本引用 #

删掉HTML里的这行代码：

<script type="module" src="html2canvas.js"></script>

重复引入会导致变量覆盖或作用域冲突，只需在projname.js中通过模块导入即可。

2. 调整projname.js的导入方式 #

最新版html2canvas的ES模块为默认导出，将导入代码改为：

import html2canvas from './html2canvas.js';

（去掉* as，直接导入默认导出的函数）

3. 确保主脚本以模块模式引入 #

确认你的projname.js在HTML中是以模块方式加载的：

<script type="module" src="projname.js"></script>

只有模块脚本才能使用import语法，普通脚本会导致导入失效。

4. 验证文件路径正确性 #

检查projname.js与html2canvas.js（或.min.js）是否在同一目录，路径错误会导致导入失败，可通过浏览器开发者工具的Network标签页查看是否有404报错。

额外提示 #

• 若使用CDN版本的html2canvas，可直接用以下导入语句，无需本地存放文件：

  import html2canvas from 'https://cdn.jsdelivr.net/npm/html2canvas@latest/dist/html2canvas.esm.min.js';
  

• 检查浏览器控制台的其他报错（如CORS、文件加载失败等），这些问题可能间接导致html2canvas无法正常初始化。

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