PDF Download in SAP UI5 Application

Introduction

SAP UI5 is a JavaScript based UI framework that helps us to build the fiori applications and SAP allows us to integrate the third-party libraries with SAP UI5 applications. Sometimes we might have a requirement to download the data as pdf, csv or word file etc. So, in this blog we will see how to download the data as pdf using third-party library called pdfMake. 

pdfMake is a opensource javascript library used to generate the pdf . To implement this, we will have some local data as below and define the respective configuration in models section of manifest file.

Local Data

Configuration in manifest file

Lets bind the above data to a table UI control and define all the properties as below:

<mvc:View controllerName="fioriapplication.controller.Home"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="Download as PDF" titleAlignment="Center" >
        <content>
           <Table items="{path:'localdata>/EmployeeData'}" class="tablecss" id="table" >
            <headerToolbar>
              <Toolbar class="btncss">
                <Text text="Table Download"/>
                <Button icon="sap-icon://download" press="downloadpdf"/>
              </Toolbar>
            </headerToolbar>
            <columns>
              <Column>
                <Text text="Name"/>
              </Column>
              <Column>
                <Text text="Role"/>
              </Column>
               <Column>
                <Text text="Skills"/>
              </Column>
               <Column>
                <Text text="Phone"/>
              </Column>
               <Column>
                <Text text="Address"/>
              </Column>
            
            </columns>
            <items>
              <ColumnListItem class="listcss">
                <cells>
                  <Text text="{localdata>Name}"/>
                  <Text text="{localdata>Role}"/>
                  <Text text="{localdata>Skills}"/>
                  <Text text="{localdata>Phone}"/>
                  <Text text="{localdata>Address}"/>
                </cells>
              </ColumnListItem>
            </items>

           </Table>
        </content>
    </Page>
</mvc:View>

Now run the application and the table is rendered as below:

Table with Data

Before starting to write the logic for downloadpdf function. we will be adding the below scripts of pdfmake library in our index.html file inside the head tag to implement the functionality.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.54/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.54/vfs_fonts.js"></script>

Now, lets start building the logic for downloadfunction as below:

     downloadpdf: function(){
                var rows = [];
                var oBinding= this.byId("table").getBinding("items");
                var jsonData=oBinding.getModel().getProperty(oBinding.getPath())
                jsonData.forEach(function (item) {
                    var row = [];
                    Object.keys(item).forEach(function (key) {
                        row.push(item[key]);
                    });
                    rows.push(row);
                });
                var docDefinition = {
                    content: [
                        {
                            style: "header",
                            alignment: "center",
                            text: "Report"
                        }
                        , {
                            table: {
                                headerRows: 1,
                                widths: ["*", "*", "*", "*", "*"],
                                body: [
                                    ["Name", "Role", "Skills", "Phone", "Address"], 
                                    ...rows
                                ]
                            }
                        }
                    ]
                };
                var pdfDocGenerator = pdfMake.createPdf(docDefinition);
                pdfDocGenerator.download("table.pdf");
            }

In the above code,

• First, we get the binding object of a table and stored in a jsondata variable
• Next, we iterated over the jsondata and converted it into an array of rows
• Then we created the PDF document definition. In the document definition, we defined the content of our pdf such as style, alignment, column names and the data etc
• Finally we generated the PDF document using createPdf method by passing the document definition
• At last we downloaded the pdf by using download method.

Once you click on the download button, a file will downloaded as shown:

Output

In this blog we successfully downloaded the data in pdf format using pdfMake library. This will help us to download the application data, store them and refer the document later.

I hope this blog was useful. Please post your comments and feedback below

Thanks!

Shivasuprith