How to generate e PDF in Apex from a VFP containing multiple aura components and attach it to an email

Question

I currently have a VFP without any controller attached to it which displays some aura components and passes them input values from URL parameters. This is used to print a pdf or paper version of the components.

My requirements are to generate a pdf of the same thing when the record is sent for approval.

What I tried is:

PageReference pdfPage = new PageReference( '/apex/PrintLayoutVFP?param1=value1');

Blob pdfBody;
pdfBody = pdfPage.getContentAsPDF();

ContentVersion fileToUpload = new ContentVersion();
fileToUpload.ContentLocation = 'S';
fileToUpload.pathOnClient ='samplefile.pdf';
fileToUpload.title = 'Sample File';

fileToUpload.versionData = pdfBody;
Database.SaveResult saveResult;
saveResult = Database.insert(fileToUpload, false);

Id contentDocumentId = [SELECT ContentDocumentId FROM ContentVersion WHERE Id =:fileToUpload.Id].ContentDocumentId;

ContentDocumentLink linkToRecord = new ContentDocumentLink();
linkToRecord.ContentDocumentId = contentDocumentId;
linkToRecord.LinkedEntityId = 'hardcodedid'; // hardcoded just to check the result
linkToRecord.ShareType = 'I'; 
insert linkToRecord;

My VFP:

<apex:page >
    <apex:includeLightning />
<style type="text/css">
        .print_page_title h1 {
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        .print_page_title h2 {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
</style>

    <div class="print_page_title" style="text-align:center">
        <h1>
{!$CurrentPage.parameters.param1}
</h1>

// this fragment below is repeated for every component
<div id="print_layout" class="print_layout medium_line_height">
        <span class="single_component_title"> {!$CurrentPage.parameters.param1} - {!$CurrentPage.parameters.param1}</span>
        <script>
             $Lightning.use("c:PrintLayoutApp", function() {
                 $Lightning.createComponent("c:ComponentName",
                     {
                         isPrintLayout: true,
                         param1: value1,
                     },
                     "print_layout",
                     function(cmp) {
                        console.log("c:component loaded successfully in VF page");
                     }
                 );
             });
        </script>
    </div>
</apex:page>

The result is a PDF file which displays a bunch of css code and doesn't show any component.

I believe that the problem with this is that the components take a little (around 1 second) to load, so whenever I call the method it just takes an instant photography.

Is there a way to generate the PDF from this VFP and have it display the components correctly loaded?

Answer 1

Per the Visualforce doc, PDF rendering is not supported if content is rendered by Javascript

PDF rendering doesn’t support JavaScript-rendered content.

You might need to refactor your Aura components so their data fetching layer can be called from the VF page's controller as well as the Aura component's controller.