Click here to Skip to main content
15,887,027 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
HTML
<title>Email Print Layout Add-in
    <base href="https://outlook.live.com/mail/o/" />
    <div id="error-container">
        <div id="error-message">
            <p>Something went wrong. Contact your administrator.</p>
        </div>
    </div>


    <div id="Customisation">
        <h1>Email Details</h1>
        Include Details:

        <br> <br> From
        <br> <br> To
        <br> <br> CC
        <br> <br> Subject
        <br> <br> Date
        <br> <br> Priority
        <br> <br> Attachements


    </div>
    
    <div id="MailContent" style="font-family: Arial Black; font-size: 20px; font-weight: bold; margin-bottom: 20px"></div>

    <div id="emailBody" style="padding-top: 20px; font-family: Arial Black; font-size: 20px; font-weight: bold; margin-bottom: 20px"></div>
    <div id="ButtonsId">
        Print Email
        Reset
    </div>
    
        // The Office initialize function must be run each time a new page is loaded.
        Office.onReady(function (info) {
            if (info.host === Office.HostType.Outlook) {
                // Your Office-specific code here
               
                initializePage();
            }
        });

       
        // Call the initializePage() function when the page loads
        var selectedCheckboxes = []; // Array to store the sequence of selected checkboxes

        function CreateContent(checkboxId) {

            const checkbox = document.getElementById(checkboxId);
            const isChecked = checkbox.checked;

            if (isChecked) {
                selectedCheckboxes.push(checkboxId);
            }

            // Update the checkbox sequence in local storage
            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 to load and set checkbox states from local storage
        function loadCheckboxStates() {
            // Load the sequence of selected checkboxes from local storage
            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;
            // document.getElementById("MailContent").innerHTML += Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html);
            console.log(customContent);
        }

      
 
        // Function to initialize the page
        function initializePage() {
            loadCheckboxStates();


        } // Function to handle images in the email body

        function onPrintButtonClick() {
            document.getElementById("Customisation").style.display = 'none';
            document.getElementById("ButtonsId").style.display = 'none';
            var emailBody = Office.context.mailbox.item.body.getAsync(Office.CoercionType.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;
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(emailBodyHtml, 'text/html');
                    

                   var tempDiv = document.createElement('div');
                    tempDiv.innerHTML =  emailBodyHtml;

                    // Find and modify the font style
                    var paragraphs = tempDiv.querySelectorAll('span, p, li, table, b,div');
                    for (var i = 0; i < paragraphs.length; i++) {
                        paragraphs[i].style.fontFamily = 'Arial Black';
                        paragraphs[i].style.fontSize = '20px';
                        paragraphs[i].style.fontWeight = 'bold';
                    }

                    // Get the modified HTML back as a string
                    var modifiedEmailBodyHtml = tempDiv.innerHTML;

                    // Now you can use modifiedEmailBodyHtml to set the email body in your add-in
                    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;
            });

            // Clear the selected checkboxes and remove from local storage
            selectedCheckboxes = [];
            localStorage.removeItem("selectedCheckboxes");

            document.getElementById("MailContent").innerHTML = "";
        }


What I have tried:

Images are not displayed at all, shows blank box
Posted
Updated 24-Nov-23 7:18am
v3

1 solution

This is unfortunately what happens when you ask ChatGPT, it spits out a bunch of code like yours, you do not understand the code, paste it here in a gazillion lines of code and hope that we will understand it for you and give a solution...

With your code, where does an error occur, does it only happen with Outlook Live or also with gmail, yahoo, normal outlook etc...?

From all of that code, where does the error occur - ask ChatGTP again to -
1) Add comments to the code to understand it
2) Add error checking so it can crash on the line of error so you know where it happened and hopefully why
3) Use normal debugging (like we all do) to read through each line of code until it errors with hopefully a meaningful error code that we can act upon.
 
Share this answer
 
Comments
aparnaChandras 25-Nov-23 0:46am    
img src get changed then image is not displayed,
this is original img tag when i am going to print mail this will change into
img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01DA01BA.1B4A9B30" data-custom="AQMkADAwATM0MDAAMS01ZjAwAC1iMDQ3LTAwAi0wMAoARgAAA3s4q%2Bc6fYZKlnQ1U%2BzW%2BywHAL35m6B6hwNGsBBZCOkUJBQAAAIBDAAAAL35m6B6hwNGsBBZCOkUJBQAAAAkpUyUAAAAARIAEAB4HiAxZsg8SLRR%2F%2FMPYE59" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Aaparna.deshpande113%40outlook.com/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATM0MDAAMS01ZjAwAC1iMDQ3LTAwAi0wMAoARgAAA3s4q%2Bc6fYZKlnQ1U%2BzW%2BywHAL35m6B6hwNGsBBZCOkUJBQAAAIBDAAAAL35m6B6hwNGsBBZCOkUJBQAAAAkpUyUAAAAARIAEAB4HiAxZsg8SLRR%2F%2FMPYE59&thumbnailType=2&isc=1&token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjczRkI5QkJFRjYzNjc4RDRGN0U4NEI0NDBCQUJCMTJBMzM5RDlGOTgiLCJ0eXAiOiJKV1QiLCJ4NXQiOiJjX3VidnZZMmVOVDM2RXRFQzZ1eEtqT2RuNWcifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ1YyI6ImE0NWNkZjYzNDZiYjQxNmY5Zjk4MzcxZWJlNmEzYTE3IiwidmVyIjoiRXhjaGFuZ2UuQ2FsbGJhY2suVjEiLCJhcHBjdHhzZW5kZXIiOiJPd2FEb3dubG9hZEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJpc3NyaW5nIjoiV1ciLCJhcHBjdHgiOiJ7XCJtc2V4Y2hwcm90XCI6XCJvd2FcIixcInB1aWRcIjpcIjkxNDc5OTU2MzE1NzU3NVwiLFwic2NvcGVcIjpcIk93YURvd25sb2FkXCIsXCJvaWRcIjpcIjAwMDM0MDAxLTVmMDAtYjA0Ny0wMDAwLTAwMDAwMDAwMDAwMFwiLFwicHJpbWFyeXNpZFwiOlwiUy0xLTI4MjctMjEyOTkzLTE1OTM4ODA2NDdcIn0iLCJuYmYiOjE3MDA1NTY4MDUsImV4cCI6MTcwMDU1NzQwNSwiaXNzIjoiMDAwMDAwMDItMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwQDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImF1ZCI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMC9hdHRhY2htZW50Lm91dGxvb2subGl2ZS5uZXRAODRkZjllN2YtZTlmNi00MGFmLWI0MzUtYWFhYWFhYWFhYWFhIiwiaGFwcCI6Im93YSJ9.UMucPZ5TW9rv7-2ZlOe643BMmX9QgwivRrtWANFQfnBE8WdIeAJD68wNlx__lNPPHqlfb4hjeKMGjpnOHFxNzJT6JfjyH89eXfakZKoVfYFXA5vzo94aeLyn0ZQgGIWWuHff1kKUM7JtjTUTEkCTjWh1-BkGsMdPLn2nOHCQb0cvz-2mVSUBICPk8NFQLOkl6ebg-92MXYVM50LDT9JNM_38Tdzg8AIPYMdW2kXZ3Qg_wupDNgYKMZFUr8lwZfh2P-nQIHAUVnIAdVXBGsTiowgo2Yd6-G_jnXgfsy7LD7A6umowUMUcf1I5dzJ2-YTWbFOOa1nG2TNEMtCucr9DkA&X-OWA-CANARY=vzP9PLC5M0aALikmZuDQ4zA21GZv6tsYfhFA_5ryqv7VOqW60FwaEwB8l_ul3orvieDSnQXEB10.&owa=outlook.live.com&scriptVer=20231110003.14&animation=true" width="233" height="81" id="x_Picture_x0020_1" alt="RytnowLogo" crossorigin="use-credentials" fetchpriority="high" style="cursor: pointer; min-height: auto; min-width: auto;" class="Do8Zj"
this is original img tag when i am going to print mail this will change into
img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01DA01BA.1B4A9B30" naturalheight="0" naturalwidth="0" src="cid:image001.png@01DA01BA.1B4A9B30" width="233" height="81" id="x_Picture_x0020_1" alt="RytnowLogo"
this is original img tag when i am going to print mail this will change into so don't uderstand how to handle it?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900