How to make a review PDF Modal LWC

This is a simple to implement a review pdf component in LWC. There are three steps to implement this.

Create a Modal component

To be able to create a Modal, you just need to visit the Modal blueprint in Lightning Design System. https://www.lightningdesignsystem.com/components/modals/#site-main-content You can either the code from Medium Modal or Large Modal. In this article, I use the Large one.

Put an Iframe in the content; we will need to pass the document link to the IFrame later.

<!--previewModal.html-->
<template>
    <template if:true={showModal}>
        <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open slds-modal_large">
            <div class="slds-modal__container">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={handleCloseModal}>
                    <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small"></lightning-icon>
                </button>
                <div class="slds-modal__header">
                    <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">View PDF</h1>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <template if:true={fileId}>
                        http://fileURL
                    </template>
                    <template if:false={fileId}>
                        Please enter a valid PDF File ID.
                    </template>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick={handleCloseModal}>Cancel</button>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
    </template>
</template>

Add a CSS for the iframe.

iframe {
    border: 0;
    width: 100%;
    height:600px;
}

A simple js controls open/close modal and received filed to pass to iframe.

import { LightningElement,api } from 'lwc';

export default class PreviewModal extends LightningElement {
    showModal = false;
    fileId;
    @api handleShowPreview(fId){
        this.fileId = fId;
        this.showModal = true;
    }

    get fileURL(){
        return '/sfc/servlet.shepherd/document/download/' + this.fileId;
    }

    handleCloseModal(){
        this.showModal = false;
    }
}

There are many use cases for using this kind of review modal. You can have a list of Invoices/Contracts/Bills and then have an action to pass the fieldId to the Modal. Below is an example.

<template>
    <lightning-datatable
            key-field="id"
            columns={columns}
            data={data}
            hide-checkbox-column
            onrowaction={handleRowAction}>
    </lightning-datatable>
    <c-preview-modal></c-preview-modal>
</template>

import { LightningElement } from 'lwc';
const data = [
    {invDate: '1/6/2018',   invNo: '200001',  totalCharge: 1926040.94, docID:'0696S00000PgFA5QAN'},
    {invDate: '2/7/2018',   invNo: '200002',  totalCharge: 2342619.60, docID:'0696S00000PgFA5QAN'},
    {invDate: '3/5/2018',   invNo: '200003',  totalCharge: 2345921.65, docID:'0696S00000PgFA5QAN'},
    {invDate: '4/8/2018',   invNo: '200004',  totalCharge: 2349424.31, docID:'0696S00000PgFA5QAN'},
    {invDate: '5/9/2018',   invNo: '200005',  totalCharge: 2349091.48, docID:'0696S00000PgFA5QAN'},
    {invDate: '6/5/2018',   invNo: '200006',  totalCharge: 2355752.08, docID:'0696S00000PgFA5QAN'},
    {invDate: '7/6/2018',   invNo: '200007',  totalCharge: 2346306.47, docID:'0696S00000PgFA5QAN'},
    {invDate: '8/9/2018',   invNo: '200008',  totalCharge: 2347481.41, docID:'0696S00000PgFA5QAN'},
    {invDate: '9/6/2018',   invNo: '200009',  totalCharge: 2343873.37, docID:'0696S00000PgFA5QAN'},
    {invDate: '10/8/2018',  invNo: '200010',  totalCharge: 2357033.81, docID:'0696S00000PgFA5QAN'},
    {invDate: '11/9/2018',  invNo: '200011',  totalCharge: 2347659.48, docID:'0696S00000PgFA5QAN'},
    {invDate: '12/6/2018',  invNo: '200012',  totalCharge: 2350418.66, docID:'0696S00000PgFA5QAN'},
];

const columns = [
    { label: 'Invoice Date', fieldName: 'invDate' },
    { label: 'Invoice No', fieldName: 'invNo' },
    { label: 'Total Charge', fieldName: 'totalCharge', type:'currency',
        typeAttributes: {
            minimumFractionDigits:'2',
            currencyCode:'USD'
        } 
    },
    { label: 'Invoice', fieldName: 'docID', type: 'button',
        typeAttributes:{
            iconName:'doctype:pdf',
            iconPosition:'center',
            variant:'bare',
            name:'viewPDF'
        }
    },    
];
export default class SampleList extends LightningElement {
    data = data;
    columns = columns;
    handleRowAction(event){
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        if(actionName === 'viewPDF'){
            this.template.querySelector('c-preview-modal').handleShowPreview(row.docID);
        }
    }
}