How to use a previewer from an Aura component

This tutorial shows an example on how to setup an Aura component that shows a preview, downloads the document and calls a Pack.

Prerequities:

This is the Apex class

The Apex will create the PDF and have a separate method to call a pack.

                    
global class CallPdfButlerWithPreviewController {

    @AuraEnabled
    global static String convert(Id recordId) {

        //see https://www.pdfbutler.com/files/api/cadmuscore/ConvertController.html#ConvertController.convertWithWrapper

        cadmus_core.ConvertController.ConvertDataModel cdm = new cadmus_core.ConvertController.ConvertDataModel();
        cdm.objectId = recordId; //this must be the Id of the record you want to generate from eg an Opportunity Id

        //Select the DocConfig via the "cadmus_core__CustomerDocumentConfigId__c", this is unique over all sandboxes and PROD. So we can hardcode it
        cadmus_core__Doc_Config__c dc = [SELECT Id FROM cadmus_core__Doc_Config__c
                                         WHERE cadmus_core__CustomerDocumentConfigId__c = 'a6a612df-b30a-41aa-aa09-38119d42e904'];

        cdm.docConfigId = dc.Id;

        cadmus_core.DocGenerationWrapper wrapper = cadmus_core.ConvertController.convertWithWrapper(cdm);

        //Here we put the title and the base64 into a JSON. For demo purposes, we string-concatenate the JSON together.
        //Do not forget to use "EncodingUtil.base64Encode" on the base64!
        return '{"title":"' + wrapper.response.metadata.targetName + '","base64":"' + EncodingUtil.base64Encode(wrapper.response.base64) + '"}';
    }

    @AuraEnabled
    global static String pack(Id recordId, String longPackId) {

        //see https://www.pdfbutler.com/files/api/cadmuscore/ConvertController.html#ConvertController.convertWithWrapper

        cadmus_core.ConvertController.ConvertDataModel cdm = new cadmus_core.ConvertController.ConvertDataModel();
        cdm.objectId = recordId; //this must be the Id of the record you want to generate from eg an Opportunity Id

        //Select the Pack via the "cadmus_core__Customer_Pack_Id__c", this is unique over all sandboxes and PROD. So we can hardcode it
        cadmus_core__Pack__c pack = [SELECT Id FROM cadmus_core__Pack__c
                                         WHERE cadmus_core__Customer_Pack_Id__c = :longPackId];

        cdm.packId = pack.Id;

        cadmus_core.ConvertController.convertWithWrapper(cdm);

        //For demo purposes, we do not care about the response
        return 'OK';
    }
}
                
                

The Aura Component

Aura - Component:

                
<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:availableForFlowScreens" 
                access="global" controller="CallPdfButlerWithPreviewController">
    
    <aura:attribute name="recordId" type="String" access="global"/>
    <aura:attribute name="docConfigData" type="Object"/>
    <aura:attribute name="showPreview" type="Boolean"/>


    <lightning:button variant="brand" 
                      label="Generate"
                      title="Generate"
                      onclick="{! c.genPDF }"/>
    
    <!-- this tag is required for downloading the PDF. If you do not want to download ... leave it out -->
	<a name="fileDownload" id="fileDownload" download="pdfbutler.pdf" aura:id="fileDownload"/>
    
    <aura:if isTrue="{! v.showPreview}">
        <!--###### MODAL BOX Start######--> 
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container" style="max-width: 70rem !important; width:70% !important;">
                <lightning:spinner variant="brand" size="large" aura:id="mySpinnerModal" class="slds-hide" />
                <!-- ###### MODAL BOX HEADER Start ######-->
                <header class="slds-modal__header">
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                          <img src="{!§Resource.cadmus_core__logo32x32}"/>&nbsp;
                      {!§Label.cadmus_core.butler_PDF_Butler_Document_Preview}
                    </h2>
                </header>
                <!--###### MODAL BOX BODY Part Start######-->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="height : 100% !important; max-height: 100% !important; ">
                        <iframe aura:id="pdfFrameNonBrowser" src="{! §Resource.cadmus_core__PdfButlerPdfPreviewer + '/web/viewer.html#zoom=page-fit'}" class="pdfFrame" 
                                width="100%" height="100%" style="height: 98%; border: none"></iframe>
                </div>
                <!--###### MODAL BOX FOOTER Part Start ######-->
                <footer class="slds-modal__footer">
                    <lightning:button variant="brand" 
                                      label="Mail"
                                      title="Mail"
                                      onclick="{! c.runPack }"/>
                    <lightning:button variant="brand" 
                                      label="Download"
                                      title="Download"
                                      onclick="{! c.download }"/>
                    <lightning:button variant="brand" 
                                      label="{!§Label.cadmus_core.butler_close}"
                                      title="{!§Label.cadmus_core.butler_close}"
                                      onclick="{! c.closePreview }"/>
                </footer>
            </div>
        </section>
    </aura:if>

</aura:component>
                
                

Aura - JavaScript Controller:

                
({
    genPDF: function(component, event, helper) {
        console.log('genPDF');
        
        var recordId = component.get("v.recordId");
        
        //this will show the modal already.
        component.set("v.showPreview", true);
        
        var action = component.get("c.convert");
        action.setParams({
            "recordId" : recordId
        });
        action.setCallback(this,function(response){
            var docConfigData = JSON.parse(response.getReturnValue());
            component.set("v.docConfigData", docConfigData);
        
            //call the PDF Butler preview component and sent the PDF. Leave a little time for the Lightning UI to settle in ... 
            //	so we do a delay of 500ms
            setTimeout(function(){ 
                console.log("Calling loadPdf");
                helper.loadpdf(component);
            }, 500);    
        });
        §A.enqueueAction(action);
    },
    runPack: function(component, event, helper) {
        console.log('runPack');
        
        var recordId = component.get("v.recordId");
        
        var action = component.get("c.pack");
        action.setParams({
            "recordId" : recordId,
            //this is the cadmus_core__Customer_Pack_Id__c field, this is the same on each environment and is safe to hardcode
            //	you can set this in another way (eg Custom Setting) if you want
            "longPackId": "00D2p000000QL9s_a072p00001DkNJT" 
        });
        action.setCallback(this,function(response){
        	console.log('runPack Done');
            //This closes the modal
        	component.set("v.showPreview", false);
        });
        §A.enqueueAction(action);
    },
    download: function(component, event, helper) {
        
        var docConfigData = component.get('v.docConfigData');
        var dlnk = component.find("fileDownload").getElement();
        dlnk.href = "data:application/octet-stream;base64," + docConfigData.base64;  // Adds the pdf to the html anchor
        dlnk.download = docConfigData.title; //  Sets the title (filename) of the document to download
        dlnk.click();  //  initiates the download automatically when the document is generated, no user has to click 
    },
    closePreview: function(component, event, helper) {
        component.set("v.showPreview", false);
    }

})
                
                

Aura - JavaScript Helper:

                
({

	loadpdf : function(component) {
        console.log("loadPdf");
		try{
			var docConfigData = component.get('v.docConfigData');
			var pdfjsframe = component.find('pdfFrameNonBrowser')
			if(typeof docConfigData.base64 != 'undefined'){
				pdfjsframe.getElement().contentWindow.postMessage(docConfigData.base64,'*');
			}
		}catch(e){
			alert('Error: ' + e.message);
		}
	}

})