I would need some help in invoking a Visualforce JS function from LWC. The LWC is embedded in the VF page as below:

<apex:page controller="DataDisplayController" showHeader="false">

<apex:includeLightning />

<!-- Page code -->
    <apex:inputhidden id="hidData" value="{!PDFData}"/>

    <apex:actionfunction name="jsGeneratePDF" action="{!downloadPDF}" />

    <div id="lightning" />

    function saveData(data, callback){
        var hidData = document.getElementById('{!$Component.hidData}');
        hidData.value = JSON.stringify(data);

        //invoke PDF Generation

        //invoke callback;
        if(typeof callback == 'function') callback();

    function loadComponents(){
        console.log("Loading lightning component: DataProcessor");

        $Lightning.use("c:LightningPDFGeneratorDemoApp", function() {
                sendData : saveData
            function(cmp) {
                // do some stuff


LWC: Is a simple piece of code with a lightning button with an action event

<lightning-button label="Download Document" onclick="{!c.downloadDocument}" />

I am referring to a blog http://www.vermanshul.com/2017/07/lightning-generate-pdf-from-lightning.html which is basically a way of generating a pdf Using hidden fields or method arguments to pass data from Lightning components to Visualforce page controller The author has used aura, while I intend to use LWC.

I need help in writing the controller function for downloadDocument, which should call the VF JS function saveData:

function saveData(data, callback){
//bind lightning component data to page component
var hidData = document.getElementById('{!$Component.hidData}')
hidData.value = JSON.stringify(data);

//invoke PDF Generation

//invoke callback;
if(typeof callback == 'function') callback();

How the author has achieved this in aura is as below: enter image description here

Please find the aura component html

<aura:component access="global">

<!-- attribute to accept Visualforce page's javascript method -->
<aura:attribute name="sendData" type="object"/>

<!-- Button component to invoke PDF download -->
<lightning:button label="Download Document" onclick="{!c.downloadDocument}" />

  • How is sendData defined in the Aura component HTML? Please edit your post and add the HTML for the component.
    – Phil W
    Mar 21 '20 at 22:58
  • Hi Phil, Please find the HTML at the bottom of the post. Mar 22 '20 at 5:26
  • it is working with only for Aura Components, if you want to apply same with LWC then you have to do it like below. Nov 25 '20 at 9:19

if you want to call the Visualforce page javascript function from LWC then it is useful for you.

Notice: LWC must be placed within the VF Page.

In your visualforce:

document.addEventListener("customevent", function(event){
    //do your vf stuff here

In your LWC :

somelwcfunction = (event) => {
    const customevent = new CustomEvent("closeModalEvent", {
        //want pass some extra param, then you can do it at here.
  • Do you have any idea, how can we do the vice versa?
    – gs650x
    Oct 5 at 13:48

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.