How to navigate to VF page from a lightning component with javascript?

Question

I have a button in a lightning component onclick of which I want to navigate to a visualforce page (which will open in lightning experience only). Is this possible with javascript? If yes, then how can I do it?

Answer 1

By using navigatingToURL

In Component

<aura:component implements="force:appHostable,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes" access="global" >
        <ui:button label="navigateToURL" press="{!c.gotoURL}" />
</aura:component>

In controller

gotoURL : function(component, event, helper) {
    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({
        "url":"vfpage url"
    });
    urlEvent.fire(); }

Answer 2

Try using navigatingToURL.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_navigateToURL.htm

Or you can first go to apex controller from javascript controller and then navigate to VF page. For navigating to apes controller, refer to below link

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_call.htm

Answer 3

Hi in case if you don't want to hardcode the url use this to get the current page base UrL as it is best way to do it. Helpfull if using community

doInit : function(component, event, helper) {
    var urlString = window.location.href;
     var baseURL = urlString.substring(0, urlString.indexOf("/s"));
     component.set("v.cbaseURL", baseURL);
},
performprint : function(component, event, helper){
   // var currentURL = '{!$Site.BaseUrl}';
    //console.log(currentURL + ' ' + window.location);
    var currentURL =window.location.href;
    if(currentURL.indexOf('/s')){
        var n = currentURL.indexOf('/s');
        currentURL = currentURL.substring(0, n != -1 ? n : currentURL.length);
    }
    currentURL = currentURL + '/apex/TermsAndConditionPrint';
    console.log('currUrl>>',currentURL);    
    window.open(currentURL,'_blank');
    // window.parent.location.href="{!URLFOR($Site.Prefix+'/apex/TermsAndConditionPrint?rec=')}"
      },