Print documents from SAPUI5

[sreehari_vpillai]

Introduction

    This is a quick blog explaining how to generate a print from SAPUI5 application . We currently have the flexibility to generate print from the back end system. For an ABAP back end system with SAPUI5 front end , we can generate an excel file or a PDF file from back end and push it to the browser so that the user can download it or take print out manually . The same technique is applicable for other (supported) back ends as well. Here, i am completely forgetting about the back end server , and thinking of generating the printouts from the browser using javascript .

Benefits 

1. Printout will be rendered in the browser
2. Data is not transferred to the back end system to generate the document and push back to the client.
3. Include SAPUI5 controls directly into the output, like charts, tables etc .

Theory : The theory behind here is , we can print html document using javascript Window print() Method

Step 1: Create a SAPUI5 application project in Eclipse , create a view and develop your UI5 application ( These steps have been discussed multiple times , so i am not discussing it here again ).

Now my application looks like the below. I included some header data , a table with stock information, and followed by a graphical representation of profit percentage .

When the controls are rendered , corresponding HTML code will be generated . So , if we want to include any SAPUI5 standard controls, we should get the rendered html content.

Below is the print format which we are now going to design .

Now we will think of some HTML stuffs . All the header information can be rendered using plain HTML tags ( using <div> , <p> etc ) and the table can be created in our choice using the <table> html tag . Graph html code can be taken from the rendered HTML DOM and insert into our print document. In the controller , i am defining a function which accept the JSON data for the header and the table ( for the header and the table ) .

In the above code snippet, i am creating the HTML code corresponding to the output expected . HTML DOM for the chart is read using the outerHTML variable from the document . Using the generated HTML string, a popup is opened and the same is printed .

And here comes your document

Lazy to write the HTML tags for the print out ?

This is for lazy people :smile: Are you not confident enough to write the HTML for your print out ? SCN is there to help you .

Step 1 : Create a blog or document in SCN.

Step 2 : Go to MS Word , and draft your output ( for eg , i am creating a table )

Step 3: Copy the table, and paste it in the content editor , and go to the html version (right side, top )

Here you will get the HTML code . You may need to clean the code based on your requirement . There are many free internet services available to create HTML from MS Word contents .

Happy coding :smile:

Sreehari