outlook 加载项图像和文件

Question

我试图找到解决我问题的办法，但没有找到任何地方，希望这里有人能救我。

我在 VS2015 上的 JavaScript 中编写了用于加密和解密正文消息的加载项。

1。第一个问题是接收者看不到图像。 （谈论通过 "insert picture inline" 按钮复制到正文中的图像）

在撰写模式中，我们对消息进行加密，然后在解密时效果很好，因为撰写模式是客户端，他可以识别本地图像。在阅读模式下当用户想要解密消息并查看他看不到的图像时，因为加密阻止 outlook 将本地图像转换为服务器上的数据。

在我的代码中，我采用这样的正文消息（撰写模式）

item.body.getAsync(
                       item.body.getAsync(
                                    "html",
                                  { asyncContext: "This is passed to the callback" },
                                   function callback(resultbody) { 

                                    ......Here we send the body for ENCRYPT.

                }))

然后，用户通过单击 'send' 常规发送加密消息。

在读取模式下，我只是将其打印到我的 html 以检查解密是否正确：

(JSON.parse(xhr.responseText).Data.Content));

然后我得到了图片图标，但没有成功显示真实图片。图标的 src 去他不能访问的地方..

<img src="https://attachment.outlook.office.net/owa/*****/service.svc/s/GetFileAttachment?id=AAMkADUwMDE0YWM1LTYwODctNG ......

我怎样才能获取这个图像标签并做一些接收者可以看到图像的事情？我不希望用户需要从我的加载项而不是原始 outlook 将图像上传到正文。我尝试将图像转换为 base-64 字符串，但我在标签中的内容还不够，仅使用原始图片并且它成功显示在 html 中但不显示在带有 SetAsync 函数的消息正文中..

2。第二个问题是附件。 我使用 dropzone 插件上传文件（因为 outlook 不允许获取附件并更改他）。所以，在我上传文件并加密他之后，我用 JS 文件 API 的服务器响应创建了一些新文件：

ar f = new File([""], "filename.txt", {type: "text/plain", lastModified: date}) . .. .

我想将文件附加到邮件，所以唯一的方法是：

addFileAttachmentAsync(uri, attachmentName, optionsopt, callback opt)

然后，我需要为这个方法创建一个 url 文件，所以我使用这个方法：

var objectURL = URL.createObjectURL(f);

但是现在，当我将方法 addFileAttachmentAsync 与对象URL 一起使用时，它写道存在问题并且无法附加它，我认为 URL 是不正确的。

谢谢大家！！

Answer 1

致所有想解决这个问题的人..

**在 outlook web 中，此解决方案运行良好，但在 Outlook 桌面版中存在与服务器同步的问题，因此 saveAsync 函数存在延迟，目前没有任何解决方案，因此它可以运行，但需要等待很少 bit.You 可以阅读更多相关信息 here。

第一题：

outlook add-in 在使用 getAsync 和 setAsync 函数时出现问题。当 body 中有一些图像时会出现问题。这是因为当您采用 Html 格式的 body 然后 return 具有一些不同的 body 图像仍然不是 'upload' 并且 src 是错误的. 我使用 Outlook rest API 成功解决了这个问题。所以解决方法是这样的：

通过 getAsync 方法获取类型为 Html 的 body 消息。创建 div 元素并在 div.
要获取消息 ID，您需要使用 saveAsync 函数将消息保存为草稿。
请求 Outlook 休息 API 您需要获取访问令牌，因此调用 getCallbackTokenAsync 函数并保存访问令牌。
向 outlook rest 发出 Http 请求 API 以获取所有附件消息。
找到正确的图片 ID 并将图片 src 替换为您从请求中获得的图像的 base-64 到 outlook rest API.
最后，您可以使用 SetAsync 函数设置新的 body。

代码：

item.body.getAsync(
Office.CoercionType.Html,
{ asyncContext: "This is passed to the callback" },
function callback(resultbody) {
  var bodyDiv = document.createElement('div');
  bodyDiv.innerHTML = content;
  Office.context.mailbox.item.saveAsync(
  function callback(result) {
    var myNewItemSaved = result.value;                                                                                            
    Office.context.mailbox.getCallbackTokenAsync({ isRest: true }, 
     function (result) {
       if (result.status === "succeeded") {  
          var accessToken = result.value;
          var itemId = ""; 
          if (Office.context.mailbox.diagnostics.hostName === 'OutlookIOS')
             itemId = Office.context.mailbox.item.itemId; 
          else    
            itemId = Office.context.mailbox.convertToRestId(myNewItemSaved,
                     Office.MailboxEnums.RestVersion.v2_0); 

      var xhr3 = new XMLHttpRequest();
      xhr3.open("GET", "https://outlook.office.com/api/v2.0/me/messages/" +    itemId + "/attachments", true);
      xhr3.setRequestHeader("Content-type", "application/json"); 
      xhr3.setRequestHeader("Access-Control-Allow-Origin", "*");  
      xhr3.setRequestHeader("Authorization", "Bearer " + accessToken); 
      xhr3.send();
      xhr3.onreadystatechange = function () {  
      if (xhr3.readyState == 4) {
        if (xhr3.status == 200) {  
           var allImages = JSON.parse(xhr3.response).value;
           var isDesktop = false;
           var imgSrcId = bodyDiv.getElementsByTagName('img')[0].getAttribute("src");
           if (imgSrcId.indexOf("cid") != -1) //Outlook Desktop
                  isDesktop = true;
          for (var i = 0; i < allImages.length; i++) {
              if (bodyDiv.getElementsByTagName('img')[i].getAttribute("src").indexOf("base64")!=-1)
                   continue;
            if (isDesktop)
             imgSrcId = bodyDiv.getElementsByTagName('img')[i].getAttribute("src");
             else
               imgSrcId =  bodyDiv.getElementsByTagName('img'[i].getAttribute("originalsrc");                                                                                                                   

           imgSrcId = imgSrcId.substr(4, imgSrcId.length);

          var wantedImg;
          for (var j = 0; j < allImages.length; j++) {
            if ((allImages[j].ContentId).localeCompare(imgSrcId) != -1) {
                           wantedImg = allImages[j]; break;}
           }
       bodyDiv.getElementsByTagName('img')[i].src = 'data:' + wantedImg.ContentType + ';base64,' + wantedImg.ContentBytes;
        }
    }
   setAsync......

  }
  }}}})})};

第二题

addFileAttachmentAsync 的问题是它只适用于外部服务器上的文件，它不能添加 blob 本地文件。所以这里的解决方案也是 Outlook rest API 。该解决方案会将我们的文件附加到消息中，但我们无法在消息中看到 this-no 附件预览，但是当我们发送它时，它将附加到消息中，我们可以在消息中看到附件在那里. 该解决方案与 body 中的图像非常相似 - 将消息保存为草稿，获取访问令牌，这次 Http 请求将 'POST' 请求我们的消息 ID 以附加我们的文件到当前消息。

向消息添加附件的请求代码（一直到这里与问题 1 相同）：

var attachment ={
     "@odata.type": "#Microsoft.OutlookServices.FileAttachment",
      "Name": "smile.png",
      "ContentBytes": "AAACFAMxLjAeKUDndY7EKF4P7QiWE7HgHLa7UiropGUTiDp5V07M0c5jaaTteauhzs0hOU+EOmVT0Lb6eSQ2MzgkCre/zCV9+kIB9PjWnOzoufau67J9PQdXapsOQSMcpt9X2QpcIjnl7H3sLu9iu2rqcvSjwhDnK6JygtghUB405EZHZ9LQcfJ1ZTYHylke2T9zbViq2BPqU/8IHZWsb/KQ/qzV4Jwv3NHnI583JvOuAtETJngh964edC4cU2IY6FkIWprksRw7d4fEQ/+3KbEyW0trIZm59jpTSV01/PhOI0RDKj1xI1Vr+lgMRZpOrYDfChWWWbByNzSXbIsTjHMU6GmQ5Cb09H3kv/2koFa5Pj2z8i+NGywYKw8ZSu3NVblM9I0EkQVLrxkM8gqyrDEtAobxPRxEzGTEXdnjws5UIiiGFBq3khuxejFGCNvUbmPM9guVZO0ccDe1FICTFHkrPlLZW/TvJYMou0HBrvH7s4taBHyZw5x03dhps+WG19D5na44vaVX2Vni6ZrrxfqFo7JTUpCJxCcPyoG7/nEWtJ/V/J+oXdypeapN9Agl6Q81WvCbzuyZgbLTfj6NXWDoliie069Hvk/k2lP+HyO7Iu5ffeRX2WWguwdfGXiNbqInrxn18tX+N7/KqWbRJv96tmijdCmCvsF9Lpr9k7QFKB93wuHfTuE6Qi2IVNBfzNBaz1iJYjY="
    } 
    var xhr4 = new XMLHttpRequest();             
    xhr4.open("POST", "https://outlook.office.com/api/v2.0/me/messages/" + itemId + "/attachments", true); 
    xhr4.setRequestHeader("Content-type", "application/json");
    xhr4.setRequestHeader("Access-Control-Allow-Origin", "*"); 
    xhr4.setRequestHeader("Authorization", "Bearer " + accessToken);
    xhr4.send(JSON.stringify(attachment));
    xhr4.onreadystatechange = function () {                                                                                                    
                   if (xhr4.readyState == 4) { 
                     if (xhr4.status == 200)
                           console.log("ok");
                     else
                          console.log(xhr4.response);
                    }};

希望对某人有所帮助，祝你好运！

outlook 加载项图像和文件

outlook add-in image & files

outlook

outlook-addin

outlook-web-app

outlook-web-addins