Render a PDF from a visualforce page in an Aura component modal full size

auramodalpdf

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>

Best Answer

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>
Related Topic