SAPUI5

How to Reduce the PDF File Blurriness after downloading the file using SAPUI5.

In this Blog I’ll give you an explanation about how to download the “HTML” data into “PDF ” format and reducing the “PDF File Blurriness ” after downloading the File.

Step 1:(Creating the Application):

First, we need to create Project in SAP Web IDE, here I am creating a project with the name “InvoiceForm” which is shown in the below Workspace.

SAPUI5

Now we will get view(Invoice.view.xml)and controller(Invoice.controller.js) as shown in the below.

SAPUI5

Step 2:(webapp.fragments.Invoiceform.fragment.xml)

I have designed my Invoice in fragment file(Invoice.fragment.xml) which is maintained in my fragments folder as shown in the below.

SAPUI5

Invoice.fragment.xml

<core:FragmentDefinition xmlns:core=”sap.ui.core” xmlns:f=”sap.ui.layout.form” xmlns:l=”sap.ui.layout” xmlns:mvc=”sap.ui.core.mvc”
xmlns:sap.suite.ui.commons=”sap.suite.ui.commons” xmlns:sap.ui.commons=”sap.ui.commons” xmlns:semantic=”sap.m.semantic” xmlns=”sap.m”>
<l:Grid class=”printAreaBox” defaultSpan=”L12 M12 S12″ id=”gridUKBol” vSpacing=”0″>
<l:content>
<Label class=”businesscmpname” design=”Bold” text=”{i18n>businesscmpname}”>
<layoutData>
<l:GridData span=”L4 M4 S4″/>
</layoutData>
</Label>
<Label class=”businesscmpname” design=”Bold” text=”{i18n>}”>
<layoutData>
<l:GridData span=”L4 M4 S4″/>
</layoutData>
</Label>
<Label class=”invoicetext” design=”Bold” text=”{i18n>Invoice}”>
<layoutData>
<l:GridData span=”L4 M4 S4″/>
</layoutData>
</Label>
<HBox class=”hBoxL12US”>
<VBox class=”addressUS”>
<VBox class=”addressHboxUS”>
<HBox>
<Label class=”streetadd” text=”{i18n>streetAddress}”>
<layoutData>
<l:GridData span=”L1 M2 S2″/>
</layoutData>
</Label>
<Text class=”sapUiTinyMarginBottom” text=”{StreetAddress}”></Text>
</HBox>
<HBox>
<Label class=”busi” text=”{i18n>ctZipCode}”>
<layoutData>
<l:GridData span=”L1 M2 S2″/>
</layoutData>
</Label>
<Text class=”” text=”{City}”></Text>
</HBox>
<Link class=”sapUiTinyMarginTop” text=”Phone Number,Web Address,etc.”>
<layoutData>
<l:GridData span=”L1 M2 S2″/>
</layoutData>
</Link>
</VBox>
</VBox>
<VBox class=”billInfoBoxUS”></VBox>
<VBox class=”datesBox”>
<layoutData>
<l:GridData span=”L4 M4 S4″/>
</layoutData>
<VBox class=””>
<HBox>
<Label class=”datealign” text=”{i18n>date}”>
<layoutData>
<l:GridData span=”L1 M2 S2″/>
</layoutData>
</Label>
<Text class=”date” text=”{Date}”/>
</HBox>
<HBox>
<Label class=”sapUiTinyMarginLeft” text=”{i18n>invoice}”>
<layoutData>
<l:GridData span=”L1 M2 S2″/>
</layoutData>
</Label>
<Text class=”datealignmarginTop” text=”{Invoice}”/>
</HBox>
</VBox>
</VBox>
</HBox><—–so……..on–>
</l:content>
</l:Grid>
</core:FragmentDefinition>

Step 3:(webapp.view.invoice.view.xml)

“Loading the fragment in xml view”

After designing the fragment now we have to load that fragment in our xml view(Invoice.view.xml)by maintaining the name space as shown in the below image.

SAPUI5

Invoice.view.xml

<mvc:View controllerName=”com.Invoice.controller.Invoice” displayBlock=”true” id=”BolForm” xmlns:core=”sap.ui.core”
xmlns:f=”sap.ui.layout.form” xmlns:html=”http://www.w3.org/1999/xhtml” xmlns:l=”sap.ui.layout” xmlns:mvc=”sap.ui.core.mvc”
xmlns:sap.suite.ui.commons=”sap.suite.ui.commons” xmlns:sap.ui.commons=”sap.ui.commons” xmlns:sap.ui.core=”sap.ui.core”
xmlns:semantic=”sap.m.semantic” xmlns=”sap.m”>
<App>
<pages>
<Page class=”sapUiSizeCompact disSub” id=”mainPage” showHeader=”true” showSubHeader=”true” title=”{i18n>title}”>
<headerContent>
<Button icon=”sap-icon://download” press=”downloadPress” text=”{i18n>LabelDownload}”/>
</headerContent>
<content>
<l:Grid class=”outerGrid outerGridUK” defaultSpan=”L12 M12 S12″ id=”outerGrid”>
<l:content>
<mvc:HTMLView class=”displaySpace” viewName=”com.Invoice.Templates.Invoice”/>
<core:Fragment fragmentName=”com.Invoice.fragments.Invoiceform” id=”print1″ type=”XML”/>
</l:content>
</l:Grid>
</content>
</Page>
</pages>
</App>
</mvc:View>

Step 4: (webapp.controller.invoice.controller.js)

After loading the fragment file now we want to bind the data in fragment by loading the data in controller as shown in the below image.

Invoice.controller.js

var html2pdf;
sap.ui.define([
“sap/ui/core/mvc/Controller”,
“sap/ui/model/json/JSONModel”,
“com/Invoice/libs/htmltopdf”

], function(Controller, JSONModel) {
“use strict”;

return Controller.extend(“com.Invoice.controller.Invoice”, {
onInit: function() {
var data = {
items: [{
“pono”: “1”,
“salesrepname”: “PersonName”,
“shipdate”: “17-05-2018”,
“shipvia”: “Vizag”,
“terms”: “No Terms”,
“duedate”: “01-01-18”
}]
};
var data1 = {
items1: [{
“Description”: “Simple Invoicing Sample”,
“Quantity”: “1”,
“UnitPrice”: “10.00”,
“LineTotal”: “10.00”

}, {
“Description”: “Total Quantity on Sales Report”,
“Quantity”: “2”,
“UnitPrice”: “20.00”,
“LineTotal”: “40.00”
}, {
“Description”: ” “,
“Quantity”: ” “,
“UnitPrice”: ” “,
“LineTotal”: ” ”
}, {
“Description”: ” “,
“Quantity”: ” “,
“UnitPrice”: ” “,
“LineTotal”: ” ”
}, {
“Description”: ” “,
“Quantity”: ” “,
“UnitPrice”: ” “,
“LineTotal”: ” ”
}, {
“Description”: ” “,
“Quantity”: ” “,
“UnitPrice”: ” “,
“LineTotal”: ” ”
}

]
};

var oModel = new JSONModel(data);
this.getView().setModel(oModel, “list”);
var oModel1 = new JSONModel(data1);
this.getView().setModel(oModel1, “listtable”);

var oTable = this.getView().byId(“firstTableId”);
var newJSON1 = new JSONModel(“./model/Objects.json”);
newJSON1.loadData(“model/Objects.json”);
this.getView().setModel(newJSON1);

var simpleForm = this.getView().byId(“Detailsform”);
var newJSON = new JSONModel(“./model/FormData.json”);
newJSON.loadData(“model/FormData.json”);
this.getView().setModel(newJSON);
this.getView().bindElement(“/FormData/0”);

},

downloadPress: function() {

var element = document.getElementById(“__xmlview0–print1–gridUKBol”);

html2pdf(element);

}

});

});

After binding the data in fragment now we want see our Invoice form by executing our application as shown in below image.

SAPUI5

The above mentioned invoice can be downloaded by clicking on the download button as shown in the below image where the image can be shown in above Invoice form header and its maintained in our view as shown in below.

SAPUI5

Step 5: Loading the External API in our Controller)

Before downloading the PDF we want to add the external API i.e html2pdf. That API file is included in my libs folder as shown in below image.

SAPUI5

htmltopdf.js

You can find the code at the following link:

https://drive.google.com/open?id=123-U1-3HciHKUDbDIrMTKqiR_Kip8rzz

Loading that external API(html2pdf) in controller(Invoice.controller.js) with name space as shown in below.

SAPUI5

Step 6: Getting the Invoice From HTML data)

Now I want to get the Invoice form HTML data by getting the Invoice form ID(“__xmlview0—print1—gridUKBol”) after clicking on the download button and passing that HTML data in a variable(here I am maintained my variable name is element) as shown in below image.

SAPUI5

Now HTML data is sent to our external API (html2pdf) as shown in above image. The API converts our HTML data into PDF format and saves the PDF file with the name which we mentioned in the our API file(here I am maintained my PDF file name is Invoice.pdf in my API) which can be seen in the below image.

SAPUI5

Step 7: PDF File Downlaoding

Now we want to run our Application to generate the Invoice.pdf file by click on the download button,as shown in below image.

SAPUI5

Click on the downloaded PDF file(Invoice.pdf) to see our pdf once the file gets downloaded. But here I am facing an issue where the downloaded PDF file is very blur and PDF quality is very low which can be shown in the below image.

SAPUI5

Step 8:(External API’S)

Now I want to decrease that PDF file blurness and increase the PDF file quality by using scale option to html2canvas in html2pdf library which will increase the PDF’s size also. For that I am Replacing the previous API(html2pdf)) with html2pdf.bundle.min.js and htmltopdf.js in my libs folder which can be shown in the below image.

SAPUI5

html2pdf.js & html2pdf.bundle.min.js

Here I am loading that external API’s(html2pdf.js and html2pdf.bundle.min.js) in controller with name space which can be shown in the below.

SAPUI5

Now Invoice form HTML data is sent to our external API’S( html2pdf.bundle.min.js and htmltopdf.js) with the updated scale value which can be shown in the below image.

SAPUI5

Here I am saving the PDF file with the name of NewInvoice.pdf in html2pdf.bundle.min.js file, As shown in below.

SAPUI5

Step 9:(Downloading the new PDF File):

Again we need to run our Application and click on the download button to download the NewInvoice.pdf file as shown in below image.

SAPUI5

Click on the downloaded PDF file(NewInvoice.pdf) to see our PDF without any blurriness and good PDF quality as shown in the below image.

SAPUI5

Finally I resolved the PDF file blurriness Issue after downloading the HTML data in PDF format by using the two external APIs as mentioned in the above content.

Leave a Reply

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