Send LWC as PDF attachment in an Email

Use Case: We have an requirement where we need to send chart rendered on LWC component as PDF attachment in an email.

Solution: We have external libraries available which can help to build the above use case.

Prerequisite:

Download below static resource file from below.

1. Jquery.min.Js
2. JSPdf.js
3. html2canvas.min.js
4. rgbcolor.js
5. Canvg,js


This post is an enhancement on my previous blog to send LWC component as a PDF attachment.

Creating the component

displayChart.html

<template> 
    <div class="chart" lwc:dom="manual"></div>
    <div class = 'slds-box slds-theme_default printPdf' > <!-- content to be printed inside the pdf included in div-->
        <canvas class="pie-chart"  width="800" height="450" lwc:dom="manual"></canvas>
    </div>
    <div class="slds-box slds-theme_default">
            <lightning-button label="Send Email" onclick={printPdf}></lightning-button> <!-- call the method to send lwc content as pdf-->
    </div>
</template>

displayChart.js

import { LightningElement,api,wire,track  } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import ChartJS from '@salesforce/resourceUrl/ChartJS';
import JSPdf from '@salesforce/resourceUrl/JSPdf';
import HTMLCanvas from '@salesforce/resourceUrl/HTMLCanvas';
import RGBColor from '@salesforce/resourceUrl/RGBColor';
import CanvgJS from '@salesforce/resourceUrl/CanvgJS';
import JqueryminJS from '@salesforce/resourceUrl/JqueryminJS';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getLeadByStatus from '@salesforce/apex/LeadGraphController.getLeadByStatus';
import sendEmail from '@salesforce/apex/LeadGraphController.sendEmail';

export default class DisplayChart extends LightningElement {
    @track dataSet;
    @wire(getLeadByStatus)wiredLeads(result){
        if(result.data){
            this.dataSet = result.data; 

            console.log(result.data);
            this.Initializechartjs();
        } else if (result.error){

        }
    }



    @api chartjsInitialized = false;
    renderedCallback() {
        if (this.chartjsInitialized) {
          return;
         }
        this.chartjsInitialized = true;

        Promise.all([
              loadScript(this, ChartJS),
              loadScript(this,JqueryminJS),
              loadScript(this, JSPdf),
              loadScript(this, HTMLCanvas),
              loadScript(this, RGBColor),
              loadScript(this, CanvgJS)

        ])
    .then(() => {
        //this.Initializechartjs();
    })
    .catch(error => {


    });
   }

   Initializechartjs() {
        console.log("loaded");
        var piechart;
        var ctx = this.template.querySelector(".pie-chart").getContext('2d');

        piechart = new Chart(ctx ,{
            type: 'pie',
            data: {
                labels: Object.keys(this.dataSet),
                datasets: [
                    {
                        label:'count',
                        data: Object.values(this.dataSet),
                        backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]

                    }
                ]
            }
        });
    }

    //To generate a blob body of Div into a pdf using JSPdf library.
    printPdf() {
        var nodesToRecover = []
        var targetElem = this.template.querySelector(".printPdf"); // Select the element which needs to printed in pdf format
        var nodesToRemove = []
        var svgs = $(targetElem).find('svg');
        svgs.each(function(index, node) {
            var parentNode = node.parentNode
            var svg = parentNode.innerHTML
            var canvas = document.createElement('canvas')
            xml = (new XMLSerializer()).serializeToString(node)
            xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '')
            canvg(canvas, xml); // html to image
            nodesToRecover.push({
                parent: parentNode,
                child: node
             })
            parentNode.removeChild(node)
            nodesToRemove.push({
            parent: parentNode,
                child: canvas
             })
            parentNode.appendChild(canvas)
        })
        html2canvas(targetElem, {
            onrendered: function(canvas) {
            canvas.style.visibility = 'hidden'
            document.body.appendChild(canvas);
            var doc = new jsPDF('p', 'pt', [canvas.height,canvas.width]); // create pdf file
            doc.addHTML(canvas, {}, function() { // add image to pdf file
                 
                console.log(btoa(doc.output()));
                sendEmail({pdfBody: btoa(doc.output())})
                    .then(result => {

                    })
                    .catch(error => {
                        console.log(error);
                    });
                    document.body.removeChild(canvas)

                })

            }

        })


    }

}

LeadGraphController.cls

public with sharing class LeadGraphController {

    @AuraEnabled(cacheable=true)

    public static Map<String, Decimal> getLeadByStatus() {
        List<AggregateResult> result =  [Select Count(Id) leadCount, Status st from Lead
                                             GROUP BY Status];
        Map<String, Decimal> wrapp = new Map<String, Decimal>();
        for(AggregateResult ar:result){
            wrapp.put(String.valueOf(ar.get('st')),(Decimal)ar.get('leadCount'));

        }
        return wrapp;
    }
    @AuraEnabled
    public static string sendEmail(String pdfBody){
        Messaging.EmailFileAttachment attach = new Messaging.EmailFileAttachment();
        attach.setContentType('application/pdf');
        attach.setFileName('Report.pdf');
        attach.setInline(false);
        attach.Body = EncodingUtil.base64Decode(pdfBody);

        list<Messaging.singleEmailMessage> mails=new list<Messaging.SingleEmailMessage>();
        Messaging.singleEmailMessage mail=new Messaging.SingleEmailMessage();
        list<String> toadd=new List<String>{'mporwal92@gmail.com'};

        mail.setFileAttachments(new Messaging.EmailFileAttachment[] { attach });
        mail.setToAddresses(toadd);
        mail.setSubject('Pdf Report');
        mail.setPlainTextBody('Chart as PDF Attachment');
        mails.add(mail);
        messaging.sendEmail(mails);
        return null;
    }
}

Do not hesitate to give me feedback!!!!! :)