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

User Data Privacy

User Data Privacy User Data Privacy Our Chrome extension does not collect any personal data or user information. We are committed to respecting your privacy and ensuring a secure browsing experience. You can use our extension with confidence, knowing that your data remains private and secure. If you have any concerns or questions regarding privacy or data security, please feel free to contact us at sanjayibirds2013@gmail.com .
Read more