如何通过Autodesk Forge Viewer PDF扩展直接加载AWS S3中的PDF文件？

以下是针对你的问题的具体解决方案，按优先级排查：

1. 修复S3存储桶的CORS配置 #

Forge Viewer运行在前端浏览器中，跨域请求S3资源时会被浏览器同源策略拦截，必须配置S3的CORS规则允许你的前端域名访问：

• 登录AWS控制台，进入目标S3存储桶的「权限」标签页
• 找到「跨域资源共享(CORS)」，替换为以下配置（将<AllowedOrigin>改为你的前端域名，开发环境可暂时用*）：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://your-frontend-domain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Content-Type</ExposeHeader>
</CORSRule>
</CORSConfiguration>

2. 确保PDF文件的Content-Type正确 #

S3返回的Content-Type头必须为application/pdf，Forge Viewer才能识别为PDF文件。修改你的后端上传代码，强制指定PDF文件的Content-Type：

async uploadFile(file: Express.Multer.File, key?: string): Promise<string> {
  const bucket = this.configService.get<string>('S3_BUCKET');
  // 手动判断文件类型，确保PDF的Content-Type正确
  const contentType = key?.toLowerCase().endsWith('.pdf') ? 'application/pdf' : file.mimetype;

  const input: PutObjectCommandInput = {
    Body: file.buffer,
    Bucket: bucket,
    Key: key,
    ContentType: contentType,
    ACL: 'public-read',
  };

  // 剩余代码不变...
}

上传后可通过S3控制台查看对象的「元数据」，确认Content-Type为application/pdf。

3. 验证S3对象的可访问性 #

直接在浏览器中打开你的S3 PDF URL，确认能正常打开或下载：

• 如果无法访问，检查对象的「权限」是否为「公开可读」
• 检查存储桶的「桶策略」是否存在拒绝公开访问的规则

4. 调整Forge Viewer的加载逻辑 #

确保PDF扩展已正确加载，并添加PDF专属的加载选项：

// 先加载PDF扩展
await viewer.current.loadExtension('Autodesk.PDF');

// 再加载PDF文件，指定加载格式
viewer.current.loadModel(
  "https://easy-cost.s3.eu-north-1.amazonaws.com/12390009",
  { loadFormat: 'pdf', isAEC: false },
  onDocumentLoadSuccess,
  onDocumentLoadFailure
);

5. 排查错误详情 #

在失败回调中打印完整错误信息，帮助定位问题：

function onDocumentLoadFailure(error) {
  console.error('PDF加载失败:', error);
  console.error('错误代码:', error.statusCode);
  console.error('错误信息:', error.message);
}

常见错误：

• CORS相关错误：回到步骤1检查CORS配置
• 文件格式不支持：回到步骤2检查Content-Type
• 403错误：检查S3对象权限和桶策略

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