getAsFile在从Outlook复制嵌入式图像时在onPaste事件中返回null

Question

我的客户经常在Outlook中收到电子邮件，其中嵌入了屏幕快照。我正在为他们构建一个工作订单跟踪器网站，他们希望将电子邮件中的内容复制/粘贴到我正在构建的网页中。 （他们使用的是Chrome版本79.0.3945.117 (Official Build) (64-bit)和Microsoft Office 365 ProPlus Outlook版本1902 (Build 11328.20492 Click-to-Run))

[当他们选择整个电子邮件的内容时，e.clipboardData.items中的数据不包含对图像的任何引用。它仅包含文本（纯文本，rte和html格式），文件集合的长度为0。

[当他们在Outlook中选择单个图像并将其复制/粘贴到我的表单中时，e.clipboardData.items中的数据包括rte，html和文件类型。文件集合的长度仍然为0。当我尝试使用文件的类型（和图像/ png的类型）在项目上调用getAsFile()时，它将返回null。

如果客户右键单击图像并将其保存，他们可以将其上传到我的input type=file控件，但是我试图节省他们的精力，因为他们每天多次这样做。

我有一个带有onpaste事件的文本框：

<textarea name="maincontent_0$txtDetails" rows="2" cols="20" id="maincontent_0_txtDetails" class="orderFormDetails" onpaste="onPaste(event)"></textarea>

和文件输入控件：

<input type="file" name="maincontent_0$fuNewAttachment" id="maincontent_0_fuNewAttachment">

onpaste事件定义如下：

        function onPaste(e)
        {
            var items = e.clipboardData.items;

            const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
                       new DataTransfer();

            for (var i = 0; i < items.length; i++)
            {
                if (items[i].kind == "file")
                {
                    var blob = items[i].getAsFile();
                    if (blob != null)
                    {
                        dT.items.add(blob);
                    }
                }
            }
            if (dT.items.length > 0)
            {
                var uploadField = document.getElementById("maincontent_0_fuNewAttachment");
                uploadField.files = dT.files;
            }
        }

如果我获取html数据而不是文件数据，则可以在用户硬盘驱动器上获取缓存图像的位置，但是对我来说这是无用的，因为我无法获取实际文件的内容。

我还尝试过使用拖放操作从Outlook上传图像并遇到类似的问题（e.dataTransfer.files集合为空，e.dataTransfer.items集合仅包含带有图像本地URL的html，不是内容。]

我能做些什么来获取图像的内容，还是Outlook只是不发送它？

Answer 1

当从Outlook复制图像等时，它们以RTF格式存在于剪贴板中。大多数HTML编辑器，例如Extjs编辑器，devxtreme HTML编辑器；甚至将此类图像粘贴到Google Mail；甚至在vsts中粘贴都不支持处理RTF格式，因此在所有这些情况下，从Outlook中粘贴图像都会失败。（通常，从Microsoft产品复制和粘贴到基于浏览器的产品效果不佳：Microsoft在其内容中具有各种特殊字符，您看不到这些特殊字符，但会与您粘贴的内容混淆。您需要的是能够将RTF内容转换为HTML并粘贴。算法是：检查剪贴板数据中是否有可用的图像文件；检查那里是否有html内容；检查html内容是否引用了img标签中的本地文件url（即src =“ file：//在html内容中存在）；如果是，请检查rtf内容（如果存在）；使用类似rtfjs的库并将其转换以在粘贴处理程序中呈现给浏览器。