function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
anil Kumaranil Kumar 

How to show notes and attachemths pdf files in lightning components

Hi All,

I have requirement where i need to show notes and attachmntes file (pfd ) of work order object in the lightning component. Could you please help me on this.

Thanks,
Anil Kumar 
 
Ajay K DubediAjay K Dubedi
Hi Anil,

I have gone through your question. You can use the HTML iframe tag to show your attachments in pdf format.
  
<body>    
    <div class="slds">
        <iframe style="border: 1px solid" src="{!v.attachmentUrl}" type="application/pdf"/>
    </div>
</body>

Your attachments will be returned in blob format. So you need to convert them to pdf using getContentAsPDF() method.
Please check the link below for detailed information - 

https://salesforce.stackexchange.com/questions/189451/lightning-component-pdf-viewer-iframe


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
anil Kumaranil Kumar
Hi Ajay,

Thank you for the update.

I have followed the above code. pfd is directly showing when component loads. My requirement is i need show the link when user clicks on link pdf should open to download.

Component:

<aura:component controller="CustomAttachmentViewerController"  >
    <aura:attribute name="attachmentUrl" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <body>    
        <div class="slds">
            <iframe style="border: 1px solid" src="{!v.attachmentUrl}" type="application/pdf"/>
        </div>
    </body>
    
</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        
        var action = component.get("c.fetchContentDocument");
          
        action.setCallback(this, function(a) {
        
         console.log('Attachment data is:' + JSON.stringify(a.getReturnValue()));
         component.set("v.attachmentUrl", a.getReturnValue());
        
         
        });
        
        $A.enqueueAction(action);   
        
    }
})


Apex class:

public class CustomAttachmentViewerController {
    
         @AuraEnabled 
    public static string fetchContentDocument(){
        string attachmentId;
        string attachmentUrl;
        list<Account> acc=  [select id,(SELECT Id, Name FROM Attachments), name from Account where id = '0012v00002JTAwm'];
        attachmentId= acc[0].Attachments[0].id;
        attachmentUrl = URL.getSalesforceBaseUrl().toExternalForm() + '/servlet/servlet.FileDownload?file=' + attachmentId;
         system.debug('attachmentUrl'+attachmentUrl);
        return attachmentUrl;
    }

}

Thanks,
Anil Kumar