Lightning Component With Custom PDF Preview


Lightning Component With Custom PDF Preview

Custom PDF with Header,Content and Footer

PDF Visualforce Page (renderAs="pdf") 



<apex:page applybodytag="false" applyhtmltag="false" cache="false" renderas="pdf" showheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false">

    <head>
        <style media="print" type="text/css">
            body {
                font-family: sans-serif !important;
                font-size: 12px !important;
            }

            @page {
                size: A4;
                margin-bottom: 35mm;
                padding-top: 201px;
                margin-right: 0;

                @top-center {
                    content: element(header);
                }

                @bottom-right {
                    content: element(footer);
                }

            }

            div.header {
                display: block;
                text-align: center;
                position: running(header);
            }

            div.content {
                display: block;
                margin: 40px;

            }

            div.footer {
                display: block;
                position: running(footer);
            }
        </style>
    </head>
    <div class="header">
        <!-- Set Header Image form Static Resource -->
        <!-- <img src="{!$Resource.Header}" title="header" width="800px" /> -->
    </div>
    <div class="footer">
        <!-- Set Footer Image form Static Resource -->
        <!-- <img src="{!$Resource.Footer}" title="footer" width="800px" /> -->
    </div>
    <div class="content">
        <table border="0" cellpadding="5" cellspacing="0" style="margin: 40px; width: 80%px;">
            <tbody>
                <tr>
                    <td>
                        <div style="font-size: 51px;">
                            Cover Page
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="page-break-after: always;">
            <apex:repeat value="{!Account.contacts}" var="con">
            </apex:repeat><br />
            <table border="1" cellpadding="5" cellspacing="0" style="margin: 40px; width: 80%px;">
                <tbody>
                    <tr>
                        <td style="background-color: #cccccc;">Name</td>
                        <td style="background-color: #cccccc;">Email</td>
                        <td style="background-color: #cccccc;">Phone</td>
                        <td style="background-color: #cccccc;">Birthdate</td>
                    </tr>
                    <tr>
                        <td>{!con.Name}</td>
                        <td>{!con.Email}</td>
                        <td>{!con.Phone}</td>
                        <td>{!con.Birthdate}</td>
                    </tr>
                </tbody>
            </table>
            <div style="page-break-after: always;">
                <table border="0" cellpadding="5" cellspacing="0" style="margin: 0 auto; width: 100%px;">
                    <tbody>
                        <tr>
                            <td>
                                <div style="font-size: 51px;">
                                    Last Page
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</apex:page>

Lightning Component for PDF Preview


CustomPDFPreview.cmp (Component) 


<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
    <iframe frameborder="0" height="500px;" src="{!'/apex/CustomPDFWithHeaderAndFooter?id='+  v.recordId}" width="100%"/>
</aura:component>
PDF Preview Lightning Component Output UI
Note: After save whole code you will drag and drop code into Lightning Record Detail Page Or Quick Action

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!

Comments

  1. Iqra technologyMay 27, 2022 at 10:06 PM

    This comment has been removed by the author.

    ReplyDelete
  2. Iqra technologyJune 5, 2022 at 5:54 AM

    Your post was helpful in many ways. It was agreeable with our fellow developers.
    Salesforce Lightning Services

    ReplyDelete

Post a Comment

Popular posts from this blog

Salesforce LWC : Compact Layout on Hover

Image
Salesforce LWC : Compact Layout showing on Hover Sometime we have requirement to show Account name link on standard views, a popup with the Compact Layout shows the details of that record. LWC Parent Component : Template (HTML Code) LWC : JS (Process Code) import { LightningElement,api } from 'lwc'; export default class AccountComponent extends LightningElement { @api recordId; @track objRecordId; handleMouseover(event) { console.log(this.recordId); this.objRecordId = null const toolTipDiv = this.template.querySelector('div.ModelTooltip'); toolTipDiv.style.opacity = 1; toolTipDiv.style.display = "block"; // eslint-disable-next-line window.clearTimeout(this.delayTimeout); // esli
Read more

Salesforce LWC With Third Party JS : D3

Image
Salesforce Lightning Web Component With Third Party JS : D3 Third-Party JavaScript Libraries Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM. Manipulate the DOM with JavaScript Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM. If a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element. When using these libraries in a Lightning web component, add lwc:dom="manual" to any HTML element that you want to manipulate with JavaScript. When the engine sees the directive, it preserves encapsulation. Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls appendChild()
Read more

Communications between Lightning Components : Salesforce

Image
Communications between Lightning Components : Salesforce Salesforce have new lightning framework to create components in lightning framework which is fast with high performance to pass data from one lightning component to another. For this salesforce provides various ways to communicate between lightning components. Below are the list of ways you can communicate :- 1. Using attribute in lightning components. 2. Using aura:method to pass data. 3. Using component type event. 4. Using application type event. 5. Using System Events. 1. Using Attributes :- we have a parent component in which we have a Boolean attribute which i want to pass to child component for further processing. c:parentComponent.cmp <aura:component> <aura:attribute name=”showTable” default=”false” type=”boolean”/> <lightning:button label=”show table” onclick=”{! c.showBoolean }” /> <c:childComponent tableDisplay=”{!v.showTable}”/> </aura:component> c:parentCompone
Read more