I have created on outlook web addin to print mail in custom format , but if mail contains images,that images are not displayed , following is my code ,
<script type="text/javascript">
Office.onReady(function (info) {
if (info.host === Office.HostType.Outlook) {
initializePage();
}
});
var selectedCheckboxes = [];
function CreateContent(checkboxId) {
const checkbox = document.getElementById(checkboxId);
const isChecked = checkbox.checked;
if (isChecked) {
selectedCheckboxes.push(checkboxId);
}
localStorage.setItem("selectedCheckboxes", JSON.stringify(selectedCheckboxes));
PrintFormat();
}
function getEmailAddresses(emailArray) {
return emailArray.map(function (address) {
return address.displayName;
}).join(', ');
}
function getAttachments(attachmentArray) {
return attachmentArray.map(function (attachment) {
return attachment.name;
}).join(', ');
}
function loadCheckboxStates() {
const savedCheckboxes = JSON.parse(localStorage.getItem("selectedCheckboxes")) || [];
const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach(function (checkbox) {
const checkboxId = checkbox.id;
checkbox.checked = savedCheckboxes.includes(checkboxId);
});
selectedCheckboxes = savedCheckboxes;
PrintFormat();
}
function PrintFormat() {
var customContent = "<div>";
selectedCheckboxes.forEach(checkbox => {
switch (checkbox) {
case "fromCheckbox":
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">From: " + Office.context.mailbox.item.from.displayName + "</p>";
break;
case "toCheckbox":
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">To:" + getEmailAddresses(Office.context.mailbox.item.to) + "</p>";
break;
case "ccCheckbox":
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">cc: " + getEmailAddresses(Office.context.mailbox.item.cc) + "</p>";
break;
case "subjectCheckbox":
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">Subject: " + Office.context.mailbox.item.subject + "</p>";
break;
case "dateCheckbox":
const emailDate = new Date(Office.context.mailbox.item.dateTimeCreated);
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const formattedDate = daysOfWeek[emailDate.getDay()] + ", " +
months[emailDate.getMonth()] + " " +
emailDate.getDate() + ", " +
emailDate.getFullYear() + " " +
(emailDate.getHours() % 12 || 12) + ":" +
(emailDate.getMinutes() < 10 ? "0" : "") + emailDate.getMinutes() + " " +
(emailDate.getHours() < 12 ? "AM" : "PM");
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">Date:" + formattedDate + "</p>";
break;
case "priorityCheckbox":
if (Office.context.mailbox.item.importance != null) {
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">Priority: " + Office.context.mailbox.item.importance + "</p>";
}
break;
case "attachmentCheckbox":
if (Office.context.mailbox.item.attachments != null) {
customContent += "<p style=\"font-family: Arial Black;margin: 0; padding - top: 0;\">Attachment: " + getAttachments(Office.context.mailbox.item.attachments) + "</p>";
}
break;
}
});
customContent += "</div>";
document.getElementById("MailContent").innerHTML = customContent;
console.log(customContent);
}
function initializePage() {
loadCheckboxStates();
}
function onPrintButtonClick() {
document.getElementById("Customisation").style.display = 'none';
document.getElementById("ButtonsId").style.display = 'none';
var emailBody = Office.context.mailbox.item.body.getAsync("html", function (result) {
if (result.status === Office.AsyncResultStatus.Succeeded) {
document.getElementById("emailBody").innerHTML = result.value;
document.getElementById("emailBody").style.fontFamily = "Arial Black";
document.getElementById("emailBody").style.fontSize = '20px';
document.getElementById("emailBody").style.fontWeight = 'Bold';
var emailBodyHtml = result.value;
var tempDiv = document.createElement('div');
tempDiv.innerHTML = emailBodyHtml;
var paragraphs = tempDiv.querySelectorAll('span, p, li, table, b');
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.fontFamily = 'Arial Black';
paragraphs[i].style.fontSize = '20px';
paragraphs[i].style.fontWeight = 'bold';
}
var modifiedEmailBodyHtml = tempDiv.innerHTML;
document.getElementById('emailBody').innerHTML = modifiedEmailBodyHtml;
console.log(document.getElementById('emailBody').innerHTML);
window.print();
}
});
}
function onResetButtonClick() {
const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
});
selectedCheckboxes = [];
localStorage.removeItem("selectedCheckboxes");
document.getElementById("MailContent").innerHTML = "";
}
</script>
What I have tried:
function displayEmailContent(html) {
var container = document.getElementById("MailContent");
container.innerHTML = resolveCidReferences(html);
}
function resolveCidReferences(html) {
var resolvedHtml = html.replace(/<img[^>]+src="cid:([^\s'"]+)"[^>]*>/g, function (match, cid) {
// Replace the cid reference with the URL provided by Outlook
return '<img src="https:
});
return resolvedHtml;
}
tried this but not worked