Screenshot Capture and PDF Creation in SAP UI5 Application

[shivasuprith]

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. In this blog we will discuss how to capture the whole screen as well as specific elements of the screen using html2canvas and domtoimage libraries and finally we will also look how to download these images in a pdf using jsPDF library.

lets have a brief about the libraries that we are going to use in this blog.

html2canvas - It is a javascript library used to take the screenshots of webpages or specific elements within a webpage. It renders the content of a web page into HTML5 canvas element, which can be converted to an image file.

To use this library in the application, we need to include the below script in index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

domtoimage - It is a javascript library used to take the screenshots of webpages or specific elements within a webpage. It converts the DOM (Document Object Model) into an image.

To use this library in our application, we need to include the below script in index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

jsPDF - It is a popular javascript library used to generate the pdf.

To use this library in our application, we need to include the below script in index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

 

Application Development

We will develop a basic UI screen using local data, define the respective configuration in models section of manifest file and bind the model to the UI controls as below.

Local Data

Configuration in manifest file

 

<mvc:View controllerName="fioriprojectapplication.controller.Home"

    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

    xmlns="sap.m">

    <Page id="page" title="Employee Details">

        <headerContent>

            <Button text="Table capture by html2canvas" press="tablecapture" />

            <Button text="Screen capture by domtoimage" press="screencapture" />

            <Button text="Download PDF" press="downloadpdf"/>

        </headerContent>

        <content>

            <Table  width="60%" id ="table" class="tablecss"   items="{localmodel>/employee}" >

                <columns >

                    <Column >

                        <Text text="Name" />

                    </Column>

                    <Column >

                        <Text  text="Role" />

                    </Column>

                    <Column>

                        <Text  text="Age" />

                    </Column>

                </columns>

                <items>

                    <ColumnListItem >

                        <cells>

                            <Text  text="{localmodel>name}" />

                            <Text text="{localmodel>role}" />

                            <Text text="{localmodel>age}" />

                        </cells>

                    </ColumnListItem>

                </items>

            </Table>

        </content>

    </Page>

</mvc:View>

 

Now we will define the logic to the buttons provided on UI screens.

First, we will use the html2canvas library to capture the table UI control as below

tablecapture: function()

{

    var bodyElement = this.getView().byId("table").getDomRef();

    html2canvas(bodyElement).then(function(canvas) 

    {

        var image = canvas.toDataURL('image/png');

        var downloadLink = document.createElement('a');

        downloadLink.href = image;

        downloadLink.download = 'tablescreenshot.png';

        downloadLink.style.display = 'none';

        document.body.appendChild(downloadLink);

        downloadLink.click();

        document.body.removeChild(downloadLink);

     });

}

 

Next we will capture the whole UI screen using domtoimage library as below.

screencapture: function()

{

    var node = document.body

    domtoimage.toPng(node).then(function (dataUrl) 

    {    

        var downloadLink = document.createElement('a');

        downloadLink.href =dataUrl;

        downloadLink.download = 'fullscreenshot.png';

        downloadLink.style.display = 'none';

        document.body.appendChild(downloadLink);

        downloadLink.click();

        document.body.removeChild(downloadLink);

     })

     .catch(function (error) 

     {

         console.error('Error:', error);

     });

}

 

Finally we will use jsPDF and domtoimage library to a generate a pdf with UI screenshot in it as below.

downloadpdf: function()

{

    domtoimage.toPng(document.body).then(function (dataUrl) 

    {     

        var doc = new jsPDF(

        {

            orientation:'landscape',

        })

        doc.addImage(dataUrl,'PNG',25,25,250,150)

        doc.save('applicationview.pdf')

    })

}

 

Output

UI Screen

 

tablescreenshot.png

fullscreenshot.png

applicationview.pdf

Conclusion

In this blog, we explored how to capture the screenshots using html2canvas and domtoimage libraries. We also explored jsPDF library to generate the pdf document of these screenshots. These libraries enhances the interactivity and functionality of the application. However these libraries may have some limitations, especially when dealing with complex content so refer the documentation before integrating these libraries into the project.

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

Thanks!

Shivasuprith