File Preview in Lightning Web Component(lwc)

To open one or more file records in Lightning Experience and the Salesforce app, use the navigation service, lightning/navigation.
The navigation service opens the preview of one or more files in a modal dialog in Lightning Experience or triggers a file download in the Salesforce app on mobile devices.

The navigation service uses a PageReference, which describes a page, or in this case, a file.

Use a page reference with 
type: 'standard__namedPage' 
pageName: 'filePreview'

Page Reference sample

this[NavigationMixin.Navigate]({
        type: 'standard__namedPage',
        attributes: {
            pageName: 'filePreview'
        },
        state : {
            recordIds: '069xx0000000001AAA,069xx000000000BAAQ',
            selectedRecordId:'069xx0000000001AAA'
        }
      })

 recordIds: the property is a comma-separated list of all record IDs(ContentDocumentId) available for download.
 selectedRecordId: the selectedRecordId specifies the record to downloads first.

Example

FilePreviewInLWC.html

<template>
    <lightning-card title="File Preview In Lightning Web Component">
        <template if:true={files}>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div title="Key">File Name</div>
                        </th>
                        <th scope="col">
                            <div title="Value">File Extension</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={files} for:item="keyValue">
                        <tr key={keyValue.Id}>
                            <th scope="col">
                                <div>{keyValue.Title}</div>
                            </th>
                            <th scope="col">
                                <div>{keyValue.FileExtension}</div>
                            </th>
                            <th scope="col">    
                                <!-- Using Dataset Property to get ContentDocumentId -->
                                <lightning-button data-id={keyValue.ContentDocumentId} 
                                                  label="Preview" 
                                                  variant="brand" 
                                                  value="file preview" 
                                                  onclick={filePreview}></lightning-button>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

FilePreviewInLWC.js

import { LightningElement, wire, track } from 'lwc';

// importing Apex class method
import retriveFiles from '@salesforce/apex/LWCExampleController.retriveFiles';

// importing navigation service
import { NavigationMixin } from 'lightning/navigation';

// extends the class to 'NavigationMixin'
export default class FilePrivewInLWC extends NavigationMixin(LightningElement) {
    // reactive variables
    @track files;

    // Reteriving the files to preview
    @wire(retriveFiles)
    filesData({data, error}) {
        if(data) {
            window.console.log('data ===> '+data);
            this.files = data;
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // when you click the preview button this method will call and
    // it will show the preview of the file based on ContentDocumentId
    filePreview(event) {
        // Naviagation Service to the show preview
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview'
            },
            state : {
                // assigning ContentDocumentId to show the preview of file
                selectedRecordId:event.currentTarget.dataset.id
            }
          })
    }
}

Apex Class

public inherited sharing class LWCExampleController {
    @AuraEnabled(cacheable=true)
    public static list<ContentVersion> retriveFiles(){
        return [SELECT Id, Title, FileExtension, ContentDocumentId From ContentVersion];
    }
}

Note

• The filePreview named page value supports the ContentDocument and ContentHubItem (external files) objects.
• 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. 
• The page value isn’t supported even if you access these containers inside Lightning Experience or the Salesforce mobile app.

Result