Open “Content Document Preview” via Lightning Button (Lightning Web Component)

Question

I have a button that should display a PDF to the user when clicked. I want to replicate the behavior of the "Combined Attachments" view in the record's related list, where a click on an Attachment of type "Content Document" opens the document in an overlayed preview mode (instead of opening a new tab or prompting to download).

The following code allows me to open the file in a new tab and prompts the user to download the file.

<lightning-button
   class="slds-m-horizontal_xx-small"
   label="View"
   icon-name="utility:display_text"
   variant="success"
   disabled={isWorking}
   onclick={viewPdf}>
</lightning-button>

viewPdf() {
    this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.pdfContentVersionRecord.Id,
                objectApiName: 'ContentVersion',
                actionName: 'view'
        }
    });
}

this.pdfContentVersionRecord is a ContentVersion from my Apex Method.

So how can I generate a navigation link that opens the PDF in preview mode?

Answer 1

Your Apex method could return the ContentDocumentId instead, then you can benefit from the filepreview named page to have the document preview, like this:

viewPdf() {
      this[NavigationMixin.Navigate]({
        type: 'standard__namedPage',
        attributes: {
            pageName: 'filePreview'
        },
        state : {
            recordIds: '069xx0000000001AAA' //your ContentDocumentId here
        }
      });
    }

For more details refer to the Open Files documentation and note the following:

The filePreview named page value is supported in Lightning Experience and all versions of the mobile app. It isn’t supported in other containers, such as Lightning Components for Visualforce, Lightning Out, or Communities.