Table of Contents
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();
}
});
});
Leave a Reply