Skip to Content

Print documents from SAPUI5


    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 .


  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 .

blog 2.JPG

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 🙂 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 🙂


You must be Logged on to comment or reply to a post.
  • Why go through all the manual hassle of writing HTML output by hand?

    A much simpler, flexible and less time consuming approach would be to just generate your to-be-printed report in SAPUI5  and use CSS @media print to style your output specific for printed output

    • Could you expand on this a little?

      I see above where, inside of one function some HTML is written to a window, the window is printed and then closed. Very straight forward.

      How do I accomplish this, still within a function, by generating the report un UI5?

    • But i see some bottlenecks in that(correct me  Robin van het Hof ). What if i need to display a table in the print out with two column merged and having a total column in the  bottom like the below, or even deliciously complicated? I don’t think we can achieve all these features in SAPUI5 form , as we can only play with the rendered HTML.table.JPG  


      • Can be perfectly achieved in SAPUI5. Have you taken a look at FlexBoxes (VBox, HBox)?

        But then again, why would you want to print something that is not already on your screen? If your purpose is to print a report or something, I would not advise to do it in UI5 but rather use a backend server (Gateway, Java, etc) to generate these forms.

  • If I have checkboxes in table after converting ui5 table they are not visible in print preview my table object is var oTable = new sap.ui.table.Table() checkbox are coming after selecetion mode settings on UI but while printing they are not visible place holder is there

  • Thank you for the blog. It’s really helpful. 🙂


    But  I’ve got one problem using this method. All the UI5 buttons on the page become unclickable after user clicked the print button. Do you have any idea?

  • Hi,

    I am trying the same with Json Model. please refer the images below. i am not able to get the print

    print preview properly. am not able to get the chart also, i am using viz frame chart.




    	var table =
    				"<table style='border-collapse: collapse;border: 1px solid black;' width='95%' ><tr><th style='border: 1px solid black;'>Product</th><th style='border: 1px solid black;'>Supplier</th></tr></table>";
    			var data = oModel.getProperty("/ProductCollection");
    			for (i = 0; i < data.length; i++) {
    				table += '<tr>';
    				table += "<td style='border: 1px solid black;'>" + (i + 1) + "</td><td style='border: 1px solid black;'>" + data[i].Name +
    					"</td><td style='border: 1px solid black;'>" + data[i].SupplierName + "</td></tr>"; // criqw row ready 
    			table += '</table>'; // table ready 
    			var ctrlString = "width=500px,height=600px";
    			var wind ="", "PrintWindow", ctrlString);
    			//to read the HTML code rendered for the chart 
    			var chart = this.getView().byId('idVizFrame');
    			wind.document.write(table + '<br>' + chart); // this is the key part 
    			wind.close(); //c,1/0„pg the popug after use 


    Thank you,





    • Is your code working without the chart ? Your css is somewhere failing to build the table. Surround it with html , body  and div and give a try


      • Hi Sreehari,

        I am using viz frame chart in my app. how do i print that . It is exactly looking like your app scenario. I have table and chart. table is working perfectly. But chart part i dont know how to print?


        Thank you,


  • Hi,

    Could you explain how print planning calendar SAPUI5 please?

    I’m trying to print it but the position of interval time is not normal.


    Thank you,



    • You are gonna struggle for this unfortunately 🙁

      Many of the controls released are not compatible to be printed using this way . May be , using some additional CSS over the code could help you.



      • Hi Sreenhari,

        Thanks for your reply :p.

        Actually, I use .print() (or Ctrl+P) . Additionnally, I set visible (false) for the components which are not important in order to print just Planning calendar.

        Best regards,


      • Hello Pryia,

        I have solved my problem with method window.print() and setTimeout(),but it’s not the best solution for instant. Here is my function of button “Print”:

        onPrint: function () {

        var that = this;
        setTimeout(function () {
        setTimeout(function () {
        }, 100);
        }, 100);

        Hope it helps



  • Hi Sreehari V Pillai,


    I have the similar requirements from the customer, but we are using Ui5 and Hana as a back-end system, so do you have any idea how can we achieve the same functionality in UI5 ?

    Thanks & Regards,