Skip to Content
                   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.

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


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.


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.



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.

  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.


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. 

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. 



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.


 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.

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.

 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.

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.



html2pdf.js & html2pdf.bundle.min.js

You can find the code at the following link:

https://github.com/eKoopmans/html2pdf/tree/master/dist


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.



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.



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


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


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.
 
Thanks,
Spandana Bollu,
spandanab.in@mouritech.com,
Technical.
 
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply