How to print iframe in Lightning Component

Question

I have a Lightning component which has an iframe to a visualforce page:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

    <iframe aura:id="myFrame" id="myFrame" src="/visualforcepage"></iframe>

    <lightning:button label="Print" onclick="{! c.handleClick }" />

</aura:component>

Or LWC

   <template>
       <iframe width="100%" height="600" src={frameUrl}></iframe>
       <button onclick={handlePrint} class="slds-button slds-button_brand">Print</button>
   </template>

Using JS:

handlePrint() {
    const iframe = this.template.querySelector('iframe');
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

I would like to press a button in the Lightning component to print the contents of the iframe.

I have tried:

window.frames['myFrame'].focus();
window.frames['myFrame'].print();

And

document.getElementById("myFrame").contentWindow.print();

And

var myFrame = cmp.find('myFrame').getElement();
myFrame.focus();
myFrame.print();

And

var myFrame = cmp.find('myFrame').getElement();
myFrame.contentWindow.focus();
myFrame.contentWindow.print();

But none of the approaches make the print dialog appear.

Question

1. How can I fire the print() method on an iframe from within a Lightning component?

Answer 1

You can use window messaging service. This is like publisher-subscriber methodology. You will add event listener in vf page and fire event from enclosing component. Below is example:

VF Page:

<apex:page >
    <div>
        Page meant for Print
    </div>
    <div>
        Page meant for Print
    </div>
    <div>
        Page meant for Print
    </div>
    <div>
        Page meant for Print
    </div>

    <script>
    var lexOrigin = "https://my-own-org-dev-ed.lightning.force.com";
    window.addEventListener("message", function(event) {
        console.log("message received => ",event,(event.data==='PRINT'));
        if (event.origin !== lexOrigin) return;
        if(event.data==='PRINT') window.print();
    }, false);
    </script>

</apex:page>

Enclosing LWC component HTML:

<template>
    <lightning-button label="Print frame" onclick={printFrame}></lightning-button>
    <iframe src="/apex/POC_PrintPage" width="600px" height="600px"></iframe>
</template>

LWC component JS:

export default class Poc extends LightningElement {
    printFrame() {
        var vfOrigin = 'https://my-own-org-dev-ed--c.ap6.visual.force.com';
        var vfWindow = this.template.querySelector('iframe').contentWindow;
        vfWindow.postMessage('PRINT', vfOrigin);
    }
}

Here are the screenshots:

display: