+ Start a Discussion

Show pdf in popup with two buttons


Here is my goal :

On opportunity page i want to have a button that open a popup with
- a pdf that i generate (renderas)
- two buttons (save & save as attachment) -save i natively supported with renderas-

Is there a way to easy open a popup with a visualpage inside ? i want to stay on the opportunity page.

ANUTEJANUTEJ (Salesforce Developers) 
Hi Maxime,

I used the below lightning component code to open a lightning component which has a visualforce page that is rendered as pdf and below this, you can have the button to download vfpage that is rendered as pdf.

The lightning component I used is below 
<aura:component controller='OpenModelPopup' implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="openmodel" type="boolean"/>
    <aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
    <aura:handler name="init" value="{!this}" action="{!c.fetchListOfRecordTypes}"/>
    <aura:attribute name="lstOfRecordType" type="String[]" />
    <lightning:button label="Click Me" variant="neutral" onclick="{!c.PerformAction}" />
    <aura:If isTrue="{!v.openmodel}">
        <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal_small slds-backdrop ">
            <div class="slds-modal__container ">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Modal Popup with button click</h2>
                    <button class="slds-button slds-modal__close slds-button--icon" title="Close" onclick="{!c.closeModal}">
                        <lightning:icon iconName="utility:close" size="medium" />
                        <span class="slds-assistive-text">Close</span>
                <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap " style="height:400px;" >
                    <!--  Write Your Content here  -->
                    <div class="slds-size--1-of-2 slds-large-size--1-of-2 ">
                        <div class="slds-text-heading_large slds-text-color_success ">
                            <lightning:button label="Download Document" onclick="{!c.downloadDocument}" />
    PerformAction : function(component, event, helper) {
        var cmpTarget = component.find('editDialog');
        var cmpBack = component.find('overlay');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    fetchListOfRecordTypes: function(component, event, helper) {
        var action = component.get("c.fetchRecordTypeValues");
        action.setCallback(this, function(response) {
            component.set("v.lstOfRecordType", response.getReturnValue());
public class OpenModelPopup{
    public static Map<Id, String> recordtypemap {get;set;}
    public static List<String> fetchRecordTypeValues(){
        List<Schema.RecordTypeInfo> recordtypes = Account.SObjectType.getDescribe().getRecordTypeInfos();    
        recordtypemap = new Map<Id, String>();
        for(RecordTypeInfo rt : recordtypes){
            if(rt.getName() != 'Master')
                recordtypemap.put(rt.getRecordTypeId(), rt.getName());
        return recordtypemap.values();

The code for component with visualfforce page in it is:
<aura:component implements="lightning:availableForFlowScreens,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<iframe src="{! 'https://anup2-dev-ed--c.visualforce.com/apex/testtest' }" width="100%" height="500px;" frameBorder="0"/>

Below is the output I got:

User-added image

For the button to save the document you can use this link to refer this implementation:

>> https://www.vermanshul.com/2017/07/lightning-generate-pdf-from-lightning.html

I hope this helps and in case if this comes in handy can you please choose this as the best answer so that it can be useful for others in the future.

How do you call the popup from opportunity overview ?
ANUTEJANUTEJ (Salesforce Developers) 
So In the lightning component there is a button <lightning:button label="Click Me" variant="neutral" onclick="{!c.PerformAction}" /> that is places on the page layout to open the popup
Meaby it's incomplete i have an error with your example : No COMPONENT named markup://c:js
ANUTEJANUTEJ (Salesforce Developers) 
Yes that is the component in my org so to achieve the above you will have to follow the below steps:

1> Create a visualforce page which is rendered as pdf.

2> create a lightning component lets call it lcvf and paste the above codes for 1,2 in apex class create and paste 3rd part of the code.

3> to show the vfpage in lightning component paste the below line in component code instead of <c:js/>

<iframe src="{! 'URL to the VFpage' }" width="100%" height="500px;" frameBorder="0"/>

Now place the lcvf lightning component on the detail page.

Let me know in case if there are any questions.
ANUTEJANUTEJ (Salesforce Developers) 
Hi Maxime,

In case if the above solution came in handy can you please choose this as the best answer so that it can be used by others in the future.