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

【问题标题】：File types (mime types) issue in Outlook web addin using Fabric UI使用 Fabric UI 的 Outlook Web 插件中的文件类型（mime 类型）问题
【发布时间】：2020-02-07 04:29:07
【问题描述】：

我正在使用 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 extension]_16x1.svg

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

感谢您的帮助。

【问题讨论】：

标签： outlook office-js outlook-addin office-addins outlook-web-addins

【解决方案1】：

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

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

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

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

重要的步骤是：

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

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

希望这会有所帮助。

【讨论】：

谢谢大卫。您的代码是使用 React 编写的。但我没有使用 React。我正在用纯 JS 编写代码。我正在使用不需要 React 或 AngularJS 的 Fabric Core。你能告诉我是否可以在不使用 React 的情况下获取图标？
我制作了一个单独的代码框，它使用 vanilla js 完成上述操作。请注意，虽然我确实需要将 React 添加为对等依赖项以使 Parcel 满意，但它并没有被使用。上面的解决方案已编辑以包含此内容。 codesandbox.io/s/uifabric-filetypeicons-example-yoyp6
当我在我的 Visual Studio 2019 asp.net 核心 Web 项目中运行上述 index.js 代码时，我收到以下错误：TypeError：解析模块说明符时出错：@uifabric/file-type-icons
David，如何在 Visual Studio 2019 中获取依赖项：uifabric/file-type-icons？是否只能通过 npm 安装选项？
我已经有一段时间没有使用 asp.net core 了。我相信你应该能够在那个环境中 npm install 东西；只是不确定我可以帮助您解决环境问题。找到这个：forums.asp.net/t/…