使用Fabric UI的Outlook Web Addin中的文件类型(MIME类型)问题 [英] File types (mime types) issue in Outlook web addin using Fabric UI

问题描述

我正在使用Fabric UI框架开发Outlook Web Addin.我在没有React或AngularJS的情况下使用Fabric UI Core.我在获取文件类型(MIME类型)图标时遇到问题.我在网上找到的关于Fabric UI中文件类型的所有引用都是针对React框架的.

I am working on an Outlook Web Addin using Fabric UI framework. Im using Fabric UI Core without React or AngularJS. I am facing an issue in getting File Types (MIME types) icons. Whatever references I found online for File types in Fabric UI are for React framework.

是否有一种方法可以在没有React的情况下使用纯Javascript在Fabric UI中获取文件类型?我找到了以下链接，其中提供了文件类型:

Is there a way to get file types in Fabric UI with plain Javascript without React? I found the following links where file types are available:

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中传递适当的文件扩展名，以加载所需的文件类型图标.例如:

I can write a simple JS code to pass appropriate file extension in the above URL to load the intended file type icon. For example :

https://static2.sharepointonline. com/files/fabric/assets/brand-icons/document/svg/[文件扩展名] _16x1.svg

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

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

Is it correct to get file types this way? Are these URLs reliable source for getting file types icon?

感谢您的帮助.

推荐答案

@uifabric/file-type-icons是当前软件包，其中包含文件类型图标映射集.它包括一个注册帮助器以及一些用于导出图像映射的给定扩展名的功能.

@uifabric/file-type-icons is the current package containing the set of file type icon mappings. It includes a registration helper along with a few functions to derive a given extension to an image mapping.

@uifabric/styling包含常规图标帮助器getIcon，用于从任何图标注册中拉出已注册的图标.

@uifabric/styling contains the general icon helper getIcon to pull registered icons from any icon registrations.

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

I've made a codesandbox example here using vanilla JS: https://codesandbox.io/s/uifabric-filetypeicons-example-yoyp6

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

...and a cleaner more interactive example in React: https://codesandbox.io/s/file-type-icons-2s54c

重要步骤是:

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

1. Call initializeFileTypeIcons to register file type icons in the icon registry.
2. Call getIconProps({ extension: 'docx', size: 16 }) to get details on the iconName to map to.
3. Call getIcon to get the details of the icon, where you can access the url, which you can inject into raw HTML or use your framework of choice to render an img.

请注意，样式包对React具有同等依赖关系，因此我需要添加它，但此处未使用它.这是我们当然可以改进的地方.

Note that the styling package has a peer dependency on React, so I needed to add it, but it is not being used here. This is something we could certainly improve on.

希望这会有所帮助.

这篇关于使用Fabric UI的Outlook Web Addin中的文件类型(MIME类型)问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！