无法使用import时，如何在Retool中加载并使用jsPDF？

步骤1：通过CDN引入umd版本的jsPDF #

在Retool自定义组件的HTML区域，添加script标签加载umd格式的jsPDF：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

步骤2：正确调用构造函数 #

umd版本会将jsPDF挂载到全局jspdf对象下，需通过命名空间访问构造函数，而非直接使用jsPDF：

// 初始化PDF实例
const pdf = new jspdf.jsPDF('p', 'pt', 'a4');
// 示例：添加文本内容
pdf.text('Retool自定义组件生成的PDF', 20, 20);
// 保存PDF文件
pdf.save('retool-pdf-demo.pdf');

问题原因说明 #

• Retool自定义组件的运行环境默认不支持ES模块语法，因此import语句会触发「Cannot use import statement outside a module」错误。
• 直接调用new jsPDF()失败，是因为umd版本未直接暴露全局jsPDF变量，而是将其封装在jspdf命名空间内。

可选离线方案 #

若需避免依赖CDN，可将umd版本的jsPDF完整代码复制到自定义组件的JavaScript区域最顶部（用自执行函数包裹），再按上述方式调用构造函数即可。

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