Skip to Content
Technical Articles
Author's profile photo Bejugam Shivasuprith

PDF Download in SAP UI5 Application


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%20Data

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"
    <Page id="page" title="Download as PDF" titleAlignment="Center" >
           <Table items="{path:'localdata>/EmployeeData'}" class="tablecss" id="table" >
              <Toolbar class="btncss">
                <Text text="Table Download"/>
                <Button icon="sap-icon://download" press="downloadpdf"/>
                <Text text="Name"/>
                <Text text="Role"/>
                <Text text="Skills"/>
                <Text text="Phone"/>
                <Text text="Address"/>
              <ColumnListItem class="listcss">
                  <Text text="{localdata>Name}"/>
                  <Text text="{localdata>Role}"/>
                  <Text text="{localdata>Skills}"/>
                  <Text text="{localdata>Phone}"/>
                  <Text text="{localdata>Address}"/>


Now run the application and the table is rendered as below:Table%20with%20Data

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=""></script>
<script src=""></script>
<script src=""></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) {
                var docDefinition = {
                    content: [
                            style: "header",
                            alignment: "center",
                            text: "Report"
                        , {
                            table: {
                                headerRows: 1,
                                widths: ["*", "*", "*", "*", "*"],
                                body: [
                                    ["Name", "Role", "Skills", "Phone", "Address"], 
                var pdfDocGenerator = pdfMake.createPdf(docDefinition);

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:


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



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Marian Zeis
      Marian Zeis

      Thank you for your blog post.

      Unfortunately the integration of third party Libraries like this is outdated and bad practice mainly because this would not work in a productive scenario.

      Better use Ui5 tooling modules for this.

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Marian,

      Which UI5 tooling modules would you recommend?



      Author's profile photo Marian Zeis
      Marian Zeis

      Hi Mustafa,

      I meant this one