使用 Fabric UI 的 Outlook Web 插件中的文件类型（MIME 类型）问题

Question

我正在使用 Fabric UI 框架开发 Outlook Web 插件。我正在使用没有 React 或 AngularJS 的 Fabric UI Core。我在获取文件类型（MIME 类型）图标时遇到问题。我在网上找到的有关 Fabric UI 中文件类型的任何参考资料都是针对 React 框架的。

有没有一种方法可以在不使用 React 的情况下使用普通 Javascript 在 Fabric UI 中获取文件类型？我找到了以下可用文件类型的链接：

https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/csv.svg

https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/pptx_16x1.svg

我可以编写一个简单的 JS 代码来在上面传递适当的文件扩展名 URL 以加载预期的文件类型图标。例如：

https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/[file 分机]_16x1.svg

这样获取文件类型是否正确？这些 URL 是获取文件类型图标的可靠来源吗？

感谢任何帮助。

Answer 1

@uifabric/file-type-icons 是包含文件类型图标映射集的当前包。它包括一个注册助手以及一些函数来导出图像映射的给定扩展。

@uifabric/styling 包含通用图标助手 getIcon 以从任何图标注册中提取注册图标。

我在这里使用 vanilla JS 制作了一个 codesandbox 示例： https://codesandbox.io/s/uifabric-filetypeicons-example-yoyp6

...以及 React 中更清晰、更具交互性的示例： https://codesandbox.io/s/file-type-icons-2s54c

重要的步骤是：

1. 调用 initializeFileTypeIcons 在图标注册表中注册文件类型图标。
2. 调用 getIconProps({ extension: 'docx', size: 16 }) 获取有关要映射到的 iconName 的详细信息。
3. 调用 getIcon 获取图标的详细信息，您可以在其中访问 url，您可以将其注入原始 HTML 或使用您选择的框架来呈现图片

请注意，样式包对 React 有对等依赖，因此我需要添加它，但这里没有使用它。这是我们当然可以改进的地方。

希望这对您有所帮助。