Visio API报错‘OSF is not defined’：Visio 2016客户端图表无法加载

首先直接回应你的核心疑问：Visio Embedding API是支持Visio 2016客户端创建的图表的，已有不少开发者成功用新API嵌入非旧Web部件类型的Visio图表。你遇到的问题大概率是加载顺序或格式兼容性问题，我们一步步拆解解决：

1. 先搞定"OSF is not defined"错误 #

这个报错本质是visio-web-embedded.js依赖的Office.js核心模块未被正确初始化或加载。你需要严格保证加载顺序：先加载Office.js，再加载Visio嵌入脚本，并且要等待Office初始化完成后再启动Visio Viewer。

给你一个标准的加载示例：

<!-- 先加载Office.js核心库 -->
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- 再加载Visio嵌入脚本 -->
<script src="https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js" type="text/javascript"></script>

<script>
// 等待Office初始化完成后再执行Visio嵌入逻辑
Office.initialize = function(reason) {
  const visioContainer = document.getElementById('your-visio-container');
  const embedConfig = {
    container: visioContainer,
    url: "你的Visio图表云端URL", // 需为SharePoint/OneDrive上的vsdx文件URL
    width: "100%",
    height: "700px"
  };

  // 初始化Viewer并处理后续逻辑
  Visio.createViewer(embedConfig)
    .then(viewer => {
      // 示例：获取活动页面的形状数据
      viewer.document.getActivePage()
        .then(page => page.shapes.getAll())
        .then(shapes => console.log("获取到的形状：", shapes))
        .catch(err => console.error("获取形状失败：", err));
    })
    .catch(err => console.error("嵌入失败：", err));
};
</script>

2. 确保Visio 2016创建的图表满足Web嵌入要求 #

即使API支持客户端图表，你也需要保证文件符合云端嵌入的基础要求：

• 必须保存为.vsdx格式：Visio 2016默认是这个格式，但要确认不要保存为旧的.vsd格式（该格式Visio Online不支持嵌入）。
• 上传后先通过Visio Online打开一次：第一次上传客户端创建的vsdx文件到SharePoint/OneDrive后，Visio Online会自动进行格式转换，确保文件适配Web环境。跳过这一步直接嵌入可能出现加载异常。
• 排除不支持的元素：虽然你用的是简单形状，但要确保图表里没有Visio Online不兼容的内容，比如旧版本专属形状、宏、ActiveX控件（简单连接形状一般不会有这类问题）。

3. 关于非旧Web部件类型的Visio嵌入 #

确实有大量开发者成功用新的Visio Embedding API实现了非旧Web部件的嵌入，核心要点是：

• 图表必须存储在SharePoint Online、OneDrive for Business或Teams文件库中（本地文件或其他存储不支持直接嵌入）。
• 使用正确的文件URL：可以直接用文件的共享URL，或者在Visio Online中打开后复制嵌入代码里的URL。
• 确保当前用户有该文件的查看权限：权限不足也会导致加载失败（虽然报错可能不是OSF未定义，但也是常见坑）。

最后排查步骤 #

如果按照上面的方法还是有问题，可以按以下顺序排查：

1. 换一个Visio 2016创建的简单vsdx文件测试，排除单个文件的异常。
2. 检查浏览器控制台是否有其他前置错误（比如Office.js加载失败的404或网络错误）。
3. 清空浏览器缓存后重新加载，确保Visio Online环境是最新版本。

内容的提问来源于stack exchange，提问作者Øyvind Aas-Mehren