Welcome to my blog

I have been working with Salesforce for quite a while, so don’t hesitate to contact me if you have any questions or want some advice.

s f

Subscribe
Follow Us
h

DOWNLOAD EXCEL FILE OPTION IN LWC

 . Lightning  . DOWNLOAD EXCEL FILE OPTION IN LWC

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;
    } 
}

Post a Comment