0

I wanted to preview a rendered PDF in a Lightning Component. To do so, I have created a visualforce page that renders as PDF. Additionally I have created a Lightning Component that is used as a Quick Action. Everything is working fine except that the preview modal of the PDF is very tiny. I want to populate it over 70% of the screen and almost the complete height of the screen. But I am unable to achieve this. Any help is highly appreciated.

Here is a screenshot of the tiny preview window: enter image description here

And here comes the code of the Aura component:

<aura:component controller="LtngCreateTouchpointReportPDF" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" description="LtngCreateTouchpointReportPDF">
    <aura:attribute name="isOpen" type="boolean" default="true"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="loadingActive" type="Boolean"/>

    <aura:if isTrue="{!v.isOpen}">

        <aura:html tag="style">
            .slds-modal__container {
            width : 70% !important;
            max-width : 70% !important;
            }
        </aura:html>

        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open width:70%">
            <div class="slds-modal__container width:70% height:70%">
                <!-- Empty header -->
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_medium">{!$Label.c.Quote_PDF_PDF_Preview}</h2>
                    <lightning:buttonIcon iconName="utility:close"
                                          onclick="{!c.cancelDialog }"
                                          alternativeText="close"
                                          variant="bare-inverse"
                                          class="slds-modal__close"/>
                </header>

                <!--###### MODAL BOX BODY Part Start######-->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <iframe src="{! '/apex/TouchpointReport?Id='+v.recordId}"  class="" frameborder="0" allow="geolocation *; microphone *; camera *; fullscreen" width="100%"  height="100%" id="theIframe" scrolling="no"></iframe>
                </div>

                <div class="slds-modal__footer" style="height:58px">

                    <lightning:button variant="neutral" class="uiButton--default uiButton--brand" label="{!$Label.c.Quote_PDF_Save_to_Quote}" onclick="{!c.saveToTouchpoint}"/>
                    <lightning:button variant="neutral" label="{!$Label.c.LwcCancel}" onclick="{!c.cancelDialog}"/>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>

        <c:LtngSpinnersCmp active="{!v.loadingActive}" classType="brandLarge"/>

    </aura:if>

</aura:component>
1
0

Here the result as a LWC

<template>
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
        <div class="slds-modal__container" >
            <header class="slds-modal__header">
                <lightning-button-icon alternative-text="close"
                                       class="slds-modal__close"
                                       icon-name="utility:close"
                                       onclick={cancelDialog}
                                       variant="bare-inverse"></lightning-button-icon>
                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Preview PDF</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <iframe src={reportLink}  class="" frameborder="0" allow="geolocation *; microphone *; camera *; fullscreen" width="100%"  height="800px" id="theIframe" scrolling="no"></iframe>
            </div>
            <footer class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" onclick={cancelDialog}>Cancel</button>
                <button class="slds-button slds-button_brand" onclick={saveToTouchpoint}>Save</button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>


    <lightning-spinner if:true={loadingActive}></lightning-spinner>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.