DOWNLOAD EXCEL FILE OPTION IN LWC

How to Download Excel File Option in Lightening Web Component

This Post explains how to download the excel file that is created as VF Page inside LWC Component.

1. Download the js file named download.js from the link https://github.com/rndme/download/blob/master/download.js and add it as a static resource.
2. Create a Visual force Page for the file that is to be generated as excel.

TestExcelExport.page

<apex:page controller="TestExcelExport" contentType="application/vnd.ms-excel">
     <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
        xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40">
        <Styles>
            <Style ss:ID="Default" ss:Name="Normal">
                <Alignment ss:Vertical="Bottom" ss:Horizontal="Left" ss:WrapText="1"/><Borders/><Font/><Interior/><NumberFormat/><Protection/>
            </Style>
            <Style ss:ID="s0">
                <Alignment ss:Vertical="Bottom" ss:Horizontal="Left" ss:WrapText="0"/>
            </Style>                     
        </Styles>
        <Worksheet ss:Name="Opportunity Details">
            <Table x:FullColumns="1" x:FullRows="1">
                 <Row>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">Opportunity</Data>
                    </Cell>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">{!opportunityName}</Data>
                    </Cell>
                </Row>
                <Row>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">Opportunity Owner</Data>
                    </Cell>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">{!opportunityOwner}</Data>
                    </Cell>
                </Row>
                <Row>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">Currency</Data>
                    </Cell>
                    <Cell ss:StyleID="s0">
                        <Data ss:Type="String">USD</Data>
                    </Cell>
                </Row>               
            </Table>
        </Worksheet>
    </Workbook>
</apex:page>

3. Create a Controller named TestExcelExport to populate the data in excel.

public class TestExcelExport {
 
    String oppId;
    
    public String opportunityName {set;get;}
    public String opportunityOwner {set;get;}
        
    //Setting the quote Id while Calling from Excel Page
    public TestExcelExport() {
        this.oppId = ApexPages.currentPage().getParameters().get('qid');
        if(oppId !=null){
            getOppDetails();
        }
    }
     
    //Retrieving the details and setting it in Map
    public void getOppDetails() {
 
        XLSheader = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?>';
        Opportunity opp = [select Name,Owner.name from Opportunity where id = :oppId];
         
        opportunityName = opp.Name;
        opportunityOwner = opp.Owner.name;
    }        
         
}

4. Create a lwc Component from where the file has has be downloaded.

DownloadExcelComponent.html

<template>
    <lightning-card>
         <lightning-button label="Export to Excel" title="Export to Excel" onclick={downloadExcelFile}
                        variant="brand">
                </lightning-button>
      </lightning-card>
</template>

DownloadExcelComponent.js

import {LightningElement, api, wire, track } from 'lwc';
import getExcelFileAsBase64String from "@salesforce/apex/GetExcelFile.getExcelFileAsBase64String";
import DownloadExcel from "@salesforce/resourceUrl/DownloadExcel";
 
export default class DownloadExcelComponent extends LightningElement {
//Loading the static resource js to download the excel
  renderedCallback(){
    loadScript(this, DownloadExcel)
    .then(() => {
      console.log("loaded DownloadExcel");
    })
    .catch(error => {
      console.log('Error in loading script', JSON.stringify(error));
      this.error = error;
    });
  }
   
   //Downloading the Excel File
      downloadExcelFile(){
           getExcelFileAsBase64String()
          .then(result => {
              var strFile = "data:application/excel;base64,"+ result;
              download(strFile, "TestFile.xls", "application/excel");          
          })
          .catch(error => {
            this.dispatchEvent(
              new ShowToastEvent({
                  title: "Error!",
                  message: "Error occured while downloading Excel-"+ error,
                  variant: "Error",
                  mode: 'sticky'
              })
            );
          }) 
      }
}

5. Create a controller for getting the contents of visual force page

GetExcelFile.cls

public with sharing class GetExcelFile {
   @AuraEnabled 
    public static String getExcelFileAsBase64String() {
        PageReference excelPage = Page.TestExcelExport;
        Blob excelBlob = excelPage.getContent();
        String base64Excel = EncodingUtil.base64Encode(excelBlob);
        return base64Excel;
    } 
}