Print Full Screen in SAP UI5

Introduction

Learn how to print a full screen in SAP UI5 using this straightforward guide. Using HTML and JavaScript, we’ll walk you through the steps to integrate efficient printing capabilities in your SAP UI5 application. Whether it’s an entire page or specific sections, this tutorial ensures you capture the details you need. Enhance your SAP UI5 user experience by adding this practical feature. Thus, you will learn How to print UI5 page.

Print in SAP UI5 using Windows Function

To perform a print in SAP UI5 using HTML and JavaScript, you can utilize the `window.print()` method. This method prompts the user to print the current page. You can just use CTRL + P in your keyboard to trigger print in Windows laptops.

Here’s a simple way to do it:

1. Create a Button in your XML View:

<Button text="Print" press="onPrint"/>

2. Define the onPrint function in your Controller:

onPrint: function() {
    window.print();
}

When the button is pressed, the `onPrint` function will be executed, and the user will be prompted to print the current page.

Print in SAP UI5 after converting to Image

HTML Code:

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

View Code:

<Button text="Print after converting to Image" press="onPrinCapturet"/>

Controller Code:

onPrinCapturet: function () {
            var oPage = this.getView().byId("page"); // Assuming "page" is the id of your main Page or container in the XML view

            if (oPage && oPage.getDomRef()) {
                var oDomElement = oPage.getDomRef();

                html2canvas(oDomElement).then(canvas => {
                    var oImgData = canvas.toDataURL("image/png");

                    // Open a new window or iframe and load the image data to print
                    var oPrintWindow = window.open('', '_blank');
                    oPrintWindow.document.write('<img src="' + oImgData + '" onload="window.print();"/>');
                });
            }
        },

Print specific content in SAP UI5

However, if you want to print specific content (not the entire page), you can utilize a hidden `iframe`:

1. Create a Hidden iFrame in your HTML:

<iframe id="printFrame" style="display:none;"></iframe>

2. Add the Print Button in the View:

Add id as “idFrame” to the view.

<Button text="PrintFrame" press="onPrint"/>

3. JavaScript to load content and print:

onPrintFrame: function () {
    var oFrame = document.getElementById("printFrame");
    var oContentWindow = oFrame.contentWindow;
    var oDoc = oContentWindow.document;
    // var oViewContent = this.getView().getContent()[0]; // get content of the whole view
    var oViewContent = this.getView().byId("idFrame");  // get content of the vbox view
    var sHtml = oViewContent.getDomRef().outerHTML;
    oDoc.open();
    oDoc.write("<html><head><title>Print Content</title></head><body>");
    // oDoc.write("<h1>This is the content to print</h1>"); // Replace this with the content you want to print
    oDoc.write(sHtml);  // passing the content of the UI5 view
    oDoc.write("</body></html>");
    oDoc.close();
    oContentWindow.print();
}

In the example above, the content to print is loaded into the hidden iFrame and then printed. This way, only the specific content (and not the entire UI5 application) gets printed.

Please note: Printing from a web application can vary based on the browser, so always test your printing function on different browsers to ensure compatibility.

 

Full Code

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Project Ideas</title>
        <link rel="icon" type="image/x-icon" href="https://myprojectideas.com/wp-content/uploads/2021/08/cropped-Screenshot-2021-07-26-at-1.39.04-PM.png"/>
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"PrintPage.PrintPage": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
    </head>
    <body class="sapUiBody">
        <iframe id="printFrame" style="display:none;"></iframe>
        <div data-sap-ui-component data-name="PrintPage.PrintPage" data-id="container" data-settings='{"id" : "PrintPage"}'></div>
    </body>
</html>

 

View

<mvc:View controllerName="PrintPage.PrintPage.controller.View1" xmlns:core="sap.ui.core" xmlns:layout="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page">
                    <content>
                        <VBox id="idFrame" justifyContent="Center" alignItems="Center" class="sapUiMediumMargin">
                            <!-- Invoice Heading -->
                            <Title text="Invoice" level="H1" class="sapUiSmallMarginBottom"/>
                            <!-- Invoice Date -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Invoice Date:" class="sapUiSmallMarginEnd"/>
                                <Text text="20.09.2023"/>
                            </HBox>
                            <!-- Company Name -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Company Name:" class="sapUiSmallMarginEnd"/>
                                <Text text="RUDE LABS Pvt Ltd"/>
                            </HBox>
                            <!-- Address -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Address:" class="sapUiSmallMarginEnd"/>
                                <Text text="123, Web Street, Noida, 45678"/>
                            </HBox>
                            <!-- Service Details -->
                            <Title text="Service Details" level="H2" class="sapUiSmallMarginBottom"/>
                            <Table class="sapUiMediumMarginBottom">
                                <columns>
                                    <Column><Text text="Service Name"/></Column>
                                    <Column><Text text="Description"/></Column>
                                    <Column><Text text="Amount"/></Column>
                                </columns>
                                <items>
                                    <ColumnListItem>
                                        <cells>
                                            <Text text="Website Development "/>
                                            <Text text="First Installment"/>
                                            <Text text="1000 USD"/>
                                        </cells>
                                    </ColumnListItem>
                                </items>
                            </Table>
                            <!-- Total Amount -->
                            <HBox justifyContent="End" class="sapUiSmallMarginBottom">
                                <Label text="Total Amount:" class="sapUiSmallMarginEnd"/>
                                <Text text="1000 USD"/>
                            </HBox>
                            <!-- Footer Note -->
                            <Text text="Thank you for doing business with us!" class="sapUiSmallMarginTop"/>
                        </VBox>
                        <Button text="Default Print" press="onPressPrint"/>
                        <Button text="Print after converting to Image" press="onPrinCapturet"/>
                        <Button text="PrintFrame" press="onPrintFrame"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

Controller

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("PrintPage.PrintPage.controller.View1", {
        onInit: function () {

        },

        onPrinCapturet: function () {
            var oPage = this.getView().byId("page"); // Assuming "page" is the id of your main Page or container in the XML view

            if (oPage && oPage.getDomRef()) {
                var oDomElement = oPage.getDomRef();

                html2canvas(oDomElement).then(canvas => {
                    var oImgData = canvas.toDataURL("image/png");

                    // Open a new window or iframe and load the image data to print
                    var oPrintWindow = window.open('', '_blank');
                    oPrintWindow.document.write('<img src="' + oImgData + '" onload="window.print();"/>');
                });
            }
        },

        onPressPrint: function (oEvent) {
            window.print();
        },

        onPrintFrame: function () {
            var oFrame = document.getElementById("printFrame");
            var oContentWindow = oFrame.contentWindow;
            var oDoc = oContentWindow.document;
            // var oViewContent = this.getView().getContent()[0]; // get content of the whole view
            var oViewContent = this.getView().byId("idFrame");  // get content of the vbox view
            // var sHtml = oViewContent.getDomRef().outerHTML;
            oDoc.open();
            oDoc.write("<html><head><title>Print Content</title></head><body>");
            // oDoc.write("<h1>This is the content to print</h1>"); // Replace this with the content you want to print
            oDoc.write(sHtml);  // passing the content of the UI5 view
            oDoc.write("</body></html>");
            oDoc.close();
            oContentWindow.print();
        }

    });
});

 

Author

  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.