How to open a report using LWC navigation in a new tab?

Question

I'm using the following code to open a report using a LWC card.

JS controller

navigateToReport(event) {
    // Navigate to the Contact object's Recent list view.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.settings.businessStrikesReportId,
            objectApiName: 'Report',
            actionName: 'view'
        },
        state: { 
            fv0: this.account.data.fields.Id.value,
            fv1: event.target.dataset.id
        } 
    });
}

HTML template

<div class="slds-truncate">
   <a onclick={navigateToReport} data-id="Active">Active Business Strikes: </a>
</div>

When I test this, the report opens in the same tab. I tried using target="_blank" in but it does the same.

Is there any other way to achieve this?

Answer 1

You can do it via:

navigateToReport(event) {
    // Make sure the event is only handled here
    event.stopPropagation();

    // Navigate to the Contact object's Recent list view.
    this[NavigationMixin.GenerateUrl]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.settings.businessStrikesReportId,
            objectApiName: 'Report',
            actionName: 'view'
        },
        state: { 
            fv0: this.account.data.fields.Id.value,
            fv1: event.target.dataset.id
        } 
    }).then(url => { window.open(url) });
}

Note that this adds a promise evaluation "then" handler that takes the URL and opens it in a new tab. It also makes sure the event is only handled by this onclick handler.

Answer 2

I know this is old and you have probably figured it out by now, but I thought I would answer this one as it seems to be one of the top results on Google.

Per the documentation here, you can use the GenerateURL API to get just the URL of the record page. You can then navigate to the URL via window.open(url).

this[NavigationMixin.GenerateUrl]({
    type: 'standard__recordPage',
    attributes: {
        recordId: '005B0000001ptf1IAE',
        actionName: 'view',
    },
}).then(url => {
     window.open(url);
});