如何通过CDN加载@react-pdf/renderer UMD模块并在React组件中使用

1. 选择加载文件 #

不需要加载目录下的全部文件，仅需加载UMD格式的压缩产物react-pdf.min.js即可，该文件已整合所有运行需要的内容，单文件引入就能正常使用。

2. 全局变量挂载规则 #

该UMD包加载完成后，所有导出项会自动挂载到window.ReactPDF全局对象上，和npm包导入的导出内容完全一致。

3. 接入步骤 #

• 在HTML文件中引入对应CDN的react-pdf.min.js资源，注意引入顺序要放在React、ReactDOM的资源引入之后
• 替换原有import语句，改为从全局对象解构所需模块：

// 替换原有import语句
const { pdf, Document, Page, Image, Link } = window.ReactPDF;

• 原有组件代码无需任何修改，Document、Page等组件的用法、入参和之前npm导入的版本完全相同。

4. 常见问题规避 #

• 确保你的项目React版本不低于16.8.0，和该版本库的依赖要求匹配
• 业务代码需要在CDN资源加载完成后执行，避免出现变量未定义的报错，可通过script标签的onload回调包裹相关业务逻辑来规避加载顺序问题

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