Outlook 插件图像和档案 [英] outlook add-in image & files
问题描述
我试图找到我的问题的解决方案，但没有找到任何地方，希望这里有人能救我.
我在 VS2015 上用 JavaScript 编写了加密和解密正文消息的插件.
1.第一个问题是接收者看不到的图像.(说说通过插入图片内联"按钮复制到正文中的图片)
在撰写模式中，我们对消息进行加密，然后在解密时效果很好，因为撰写模式是客户端，他可以识别本地图像.在阅读模式，当用户想要解密消息并查看他看不到的图像时，因为加密阻止 Outlook 将本地图像转换为服务器上的数据.
在我的代码中，我采用这样的正文消息(撰写模式)
item.body.getAsync(item.body.getAsync("html",{ asyncContext: "这是传递给回调" },函数回调(结果体){......在这里，我们将正文发送给 ENCRYPT.}))然后，用户通过单击发送"常规发送加密消息.
在阅读模式下，我只是将其打印到我的 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);但是现在当我使用带有 objectURL 的 addFileAttachmentAsync 方法时，它写道存在问题并且无法附加它，我认为 URL 不正确.
谢谢大家！！
给所有想解决这个问题的人..
**在 Outlook Web 中，此解决方案运行良好，但在 Outlook Desktop 中存在与服务器同步的问题，因此 saveAsync 功能存在延迟，目前没有任何解决方案，因此可以使用，但需要稍等片刻.你可以阅读更多关于它此处.
第一个问题:
在使用 getAsync 和 setAsync 函数时，Outlook 加载项中存在问题.当身体内部有一些图像时会出现问题.这是因为当您以 Html 格式获取正文然后返回带有一些不同的正文时，图像仍然没有上传"并且 src 是错误的.我成功地使用 Outlook rest API 解决了这个问题.所以解决方法是这样的:
- 通过 getAsync 方法获取 Html 类型的正文消息.创建div元素并在 div 中设置返回正文消息.
- 要获取消息 ID，您需要使用 saveAsync 函数将消息保存为草稿.
- 向 Outlook rest 发出请求API 需要获取访问令牌，因此调用 getCallbackTokenAsync 函数并保存访问令牌.
- 向 Outlook rest API 发出 Http 请求以获取所有附件存在于消息.
- 找到您图片的正确 ID，并将图片 src 替换为您从 Outlook rest 请求中获得的图像的 base-64API.
- 最后，您可以使用 SetAsync 函数设置新主体.
代码:
item.body.getAsync(Office.CoercionType.Html,{ asyncContext: "这是传递给回调" },函数回调(结果体){var bodyDiv = document.createElement('div');bodyDiv.innerHTML = 内容；Office.context.mailbox.item.saveAsync(函数回调(结果){var myNewItemSaved = result.value;Office.context.mailbox.getCallbackTokenAsync({ isRest: true },功能(结果){如果(result.status ===成功"){var accessToken = result.value;var itemId = "";如果(Office.context.mailbox.diagnostics.hostName === 'OutlookIOS')itemId = Office.context.mailbox.item.itemId;别的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 = 函数 () {如果(xhr3.readyState == 4){如果(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桌面isDesktop = true;for (var i = 0; i < allImages.length; i++) {if (bodyDiv.getElementsByTagName('img')[i].getAttribute("src").indexOf("base64")!=-1)继续;如果(是桌面)imgSrcId = bodyDiv.getElementsByTagName('img')[i].getAttribute("src");别的imgSrcId = bodyDiv.getElementsByTagName('img'[i].getAttribute("originalsrc");imgSrcId = imgSrcId.substr(4, imgSrcId.length);var WantedImg;for (var j = 0; j < allImages.length; j++) {如果 ((allImages[j].ContentId).localeCompare(imgSrcId) != -1) {想要的图像 = allImages[j];休息;}}bodyDiv.getElementsByTagName('img')[i].src = 'data:' + WantImg.ContentType + ';base64,' + WantImg.ContentBytes;}}设置异步......}}}}})})};第二个问题
addFileAttachmentAsync 的问题是，这仅适用于外部服务器上的文件，而不是添加 blob 本地文件.所以这里的解决方案也是使用 Outlook rest API .该解决方案会将我们的文件附加到消息中，但我们无法在 message 中看到此附件的预览，但是当我们发送它时，这将附加到 message ，我们可以在我们的消息中看到附件在那里.解决方案与正文中的图像之一非常相似 - 将消息另存为草稿，获取访问令牌，这次 Http 请求将是对我们的消息 ID 的POST"请求，以将我们的文件附加到当前消息.
向消息添加附件的请求的代码(一直到这里与问题 1 相同):
var 附件 ={"@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 = 函数(){如果(xhr4.readyState == 4){如果(xhr4.status == 200)console.log("ok");别的控制台日志(xhr4.response)；}};希望对大家有所帮助，祝你好运！
I try to find solution to my problems but didn't find any where,hope that someone here can save me.
I write add-in in JavaScript on VS2015 that encrypte and decrypte body messages.
1. The first problem is with images that the receiver can't see . (Talk about images that copy into the body by "insert picture inline" button)
In Compose mode we encrypte the message and then when we decrypte it's works good because the compose mode is a client side and he his recognize the local images . In read mode when user want to decrypte the message and to see the images he couldn't see because the encrypte prevent outlook to convert the local image to data on the server .
In my code I take the body message like this ( compose mode )
item.body.getAsync(
item.body.getAsync(
"html",
{ asyncContext: "This is passed to the callback" },
function callback(resultbody) {
......Here we send the body for ENCRYPT.
}))
then , the user send the encrypte message by clicking 'send' regular.
In the read mode I just print it to my html to check if the decrypte is good :
(JSON.parse(xhr.responseText).Data.Content));
and then i get icon of picture ,but not success to show the real pic . The src of the icon is going for place that not access for him ..
<img src="https://attachment.outlook.office.net/owa/*****/service.svc/s/GetFileAttachment?id=AAMkADUwMDE0YWM1LTYwODctNG ......
How can i take this tag of image and do something that the receiver can see the image ? I don't want that user will be need to upload image to body from my my add-in instead of the original outlook. I try to convert the image to base-64 string, but with what I have in the tag it not enough ,just with original picture and also it success to show in html but not in the body of message with SetAsync function..
2. The second problem is with attachments . I upload files with dropzone plug-in (because outlook don't give access to take attachment and change him). So, after I upload files and encrypte him I make some new file with the response from server with File API of JS :
ar f = new File([""], "filename.txt", {type: "text/plain", lastModified: date}) . .. .
than I want to attach the file to mail, so the only method that do this is:
addFileAttachmentAsync(uri, attachmentName, optionsopt, callback opt)
then,I need to create a url for file for this method so I use this method:
var objectURL = URL.createObjectURL(f);
But now when I use the method addFileAttachmentAsync with objectURL it's write that there is a problem and its can't attach it , I think that the URL is incorrect .
Thanks all!!
For everyone who look any solution to this problems..
**In outlook web this solutions works good but in Outlook Desktop there is a problem of synchronize with server so there is a delay with saveAsync function without any solution to this right now , so it's work but need to wait a little bit.You could read more about it here.
First Question:
There is a problem in outlook add-in with when using getAsync and then setAsync functions . The problem occurs when there is some image inside the body . It's happen because when you take the body in Html format and then return the body with some different the image still not 'upload' and the src is being wrong . I success to workaround this problem using Outlook rest API. So the workaround is going like this:
- Get the body message in type of Html by getAsync method. create div element and set the return body message inside the div.
- To get message id, you need to save your message as a draft with saveAsync function.
- To make request to Outlook rest API you need to get access token , so call to getCallbackTokenAsync function and save the access token.
- Make Http Request to outlook rest API to get all attachment exist in the message.
- Find the right ID of your image and replace the image src to the base-64 of the image that you get from your request to outlook rest API.
- Finally , you could set your new body with SetAsync function .
Code:
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......
}
}}}})})};
Second question
The problem with addFileAttachmentAsync that this is work only with files that is on external server, and it's not add a blob , local files. So also here the solution is with Outlook rest API . The solution will attach our file to the message but we can't see this-no preview of the attachment in message , but when we send it this will attach to message , and we could see in our message that the attachment is there. The solution is really similar to the one of the image in body - Save the message as a draft , get access token and this time the Http Request will be 'POST' request to our message id to attach our file to the current message.
Code to the request to add attachment to message ( all the way until here is the same like question 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);
}};
Hope it's will help someone , good luck !
这篇关于Outlook 插件图像和档案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
