SharePoint集成APS(原Forge)Viewer报错：Autodesk未定义

我正尝试使用SharePoint Framework（SPFx）在SharePoint Web部件中集成APS Viewer（原Forge Viewer），参考了官方博客教程。已适配教程提供的代码，但加载Viewer时始终报错，调用Autodesk.Viewing.Initializer初始化Viewer时失败，错误信息为：

"ReferenceError: Autodesk is not defined"

但我已正确导入相关库，请问该如何解决此问题？

操作步骤 #

• 创建SharePoint Framework Web部件，选择「No Framework」模板
• 添加用于加载Viewer的自定义JS脚本
• 在Web部件的render()函数中，通过SPComponentLoader导入Autodesk Viewer的JS库并加载自定义脚本：

SPComponentLoader.loadScript("https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js");
SPComponentLoader.loadScript("./js/ForgeTree.js");
const viewer: any = require("./ForgeViewer.js");

• 调用自定义JS脚本中的launchViewer函数（该函数会调用Autodesk.Viewing.Initializer方法），此步骤执行失败。

launchViewer函数代码 #

export function launchViewer(urn, viewableId, accessToken) {
  console.log('launchViewer')

  var options = {
    env: 'AutodeskProduction',
    getAccessToken: callback => {
      callback(accessToken, 3600);
    },
    // api: 'derivativeV2' + (atob(urn.replace('_', '/')).indexOf('emea') > -1 ? '_EU' : '') // handle OSS US and EU regions
    api: 'derivativeV2' + (Buffer.from((urn.replace('_', '/')).indexOf('emea') > -1 ? '_EU' : ''), 'base64') // handle OSS US and EU regions
  };

  if (viewer === undefined) {
    Autodesk.Viewing.Initializer(options, () => {
      viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'), { extensions: [ 'Autodesk.DocumentBrowser'] });
      viewer.start();
      var documentId = 'urn:' + urn;
      Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    })
  } else {
    var documentId = 'urn:' + urn;
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
  }
}

1. 修复异步加载顺序问题 #

SPComponentLoader.loadScript是异步操作，当前代码未等待Viewer核心库加载完成就调用launchViewer，导致Autodesk全局对象未初始化。用async/await确保加载顺序：

public render(): void {
  this.domElement.innerHTML = `
    <div id="forgeViewer" style="width: 100%; height: 600px;"></div>
  `;
  // 单独抽离加载逻辑，确保DOM容器存在后再加载脚本
  this.initViewer();
}

private async initViewer(): Promise<void> {
  // 先加载Viewer核心库，等待加载完成
  await SPComponentLoader.loadScript("https://developer.api.autodesk.com/modelderivative/v2/viewers/7.21.0/viewer3D.min.js");
  // 再加载自定义脚本
  await SPComponentLoader.loadScript("./js/ForgeTree.js");
  // 导入并调用launchViewer
  const { launchViewer } = require("./ForgeViewer.js");
  // 传入实际的urn、viewableId和accessToken
  launchViewer(yourUrnValue, yourViewableIdValue, yourAccessTokenValue);
}

2. 声明全局Autodesk对象（TypeScript环境） #

在ForgeViewer.js顶部添加全局对象声明，避免TypeScript类型检查报错：

declare var Autodesk: any;

3. 固定Viewer版本号 #

避免使用7.*模糊版本，指定稳定版本（如7.21.0），防止加载不稳定版本导致全局对象未正确暴露。

4. 修正Buffer用法错误 #

launchViewer中api参数的Buffer.from语法错误，修正为：

api: 'derivativeV2' + (Buffer.from(urn.replace('_', '/'), 'base64').toString().indexOf('emea') > -1 ? '_EU' : '')

内容的提问来源于stack exchange，提问作者CristianGomez-CO