Skip to Content
Author's profile photo Bollu Spandana
Bollu Spandana
March 2, 2018 3 minute read

How To Download QR Image and its Variables into PDF Format In SAP UI5.

Dear all,
    
            
             In this blog I’ll give you an explanation about how to  generate QR Code(Qick Response code)image by passing the static variables and how to download the QR Code & its variables in PDF format.

Step1:

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



             After creating the project we will get view(QRCode.view.xml)and controller(QRCode.controller.js).










Step2:(webapp.QRCode.view.xml)
              
       In my XML view I have placed image tag for image and Button for downloading image, placed with in the content shown in below.




<pages>
  <Page title="{i18n>title}">
     <content>
	 <VBox>
	       <Image class="qrCodfe" id="qrImageId"/>
	       <Button press="onButtonPress" text="Pdf Download" type="Emphasized" class="pdfButton"/>
	 </VBox>
      </content>
   </Page>
</pages>


 


Step3:(webapp.QRCode.controller.js)

      
How to set the Qr Code Image to the View.

         Now Generated QR Code image  is displayed in view, for that here iam getting the image ID from the view(QRCode.view.xml) and set the QR Code url to the view,that was show in below.




		onInit: function() {
			var SCAC = "A1";
			var TRAILER = "11";
			var SHIPMENT = "12";
			var SHIPPER = "abc1";
			var SHIPTO = "abc2";
			var ORDDATE = "20-01-2018";
			var BOL = "Bold";
			var PRODBATCH = "value";
			var SHIPQTY = "10";
			qrurl = 'http://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=SCAC:' + SCAC + '/TRAILER:' + TRAILER + '/SHIPMENT:' +
				SHIPMENT + '/SHIPPER:' + SHIPPER + '/SHIPTO:' + SHIPTO + '/ORDDATE:' + ORDDATE + '/BOL:' + BOL + '/PRODBATCH:' + PRODBATCH +
				'/SHIPQTY:' + SHIPQTY + '';

			this.byId("qrImageId").setSrc(qrurl);
		},


 


 
Now run you are app to get the output like this (Generated QR Code displayed in view):






Step4: 
      
                  Now we click on the Pdf Download button to get the QR Code with variables(here my function name is “onButtonPress”).


How to convert the QR Code url in to base64_data Format: 

                  Before downloading the QR Code, It is necessary to convert the QRCode url(Image) into the base64 format other wise you can't download the QRCode Image. that was show in below.




onButtonPress: function() {
            var Spliturl = qrurl;
	    var split = Spliturl.slice(0, 169);
	    var Parameters = Spliturl.split("chl=");
	    var values = Parameters[1];
	    var Fianlvalues = values.split("/");

/* ------- URL converstion to base64_data ------*/
	    
            var convertImgToDataURLviaCanvas = function(url, callback) {
	          var img = new Image();
	               img.crossOrigin = 'Anonymous';
	               img.onload = function() {
	        
            var canvas = document.createElement('CANVAS');
		  var ctx = canvas.getContext('2d');
		  var dataURL;
		  canvas.height = this.height;
		  canvas.width = this.width;
		  ctx.drawImage(this, 0, 0);
		  dataURL = canvas.toDataURL();
		  callback(dataURL);
		  canvas = null;
		};
		img.src = url;
		};

convertImgToDataURLviaCanvas(split, function(base64_data) {
		console.log(base64_data);
		var sometext1 = "QRCode and it's Veriables";
		var sometext = Fianlvalues;
		var pdf = new jsPDF();

		pdf.addImage(base64_data, 'JPEG', 2, 90, 70, 70);
		pdf.text(70, 10, sometext1);
		pdf.text(5, 30, sometext);

		pdf.save('Test.pdf');
			});

		}


 


Step5:(index.html)


        
                 When ever you can use the jsPDF function in our controller, you can must add the “jspdf.min.js” script tag in your index.html file. 

Now go to your index.html file and add the following code:


<head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="UTF-8">

	    <title>QRCodegenerator</title>

		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_bluecrystal"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"QRCodegenerator": ""}'>
		</script>

<link rel="stylesheet" type="text/css" href="css/style.css">

		<script>
			sap.ui.getCore().attachInit(function() {
				new sap.m.Shell({
					app: new sap.ui.core.ComponentContainer({
						height : "100%",
						name : "QRCodegenerator"
					})
				}).placeAt("content");
			});
		</script>
				<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
	</head>



 


After adding the Script tag in index.html page, now we click on the  download button to get the pdf form show in below(Test.pdf):




Finally we have to open the pdf file for getting  the QR Code image and veriables like this: 




 


 


Thanks,


Spandana Bollu,


spandanab.in@mouritech.com,


Technical.




 


 

    

  

  


            
            
  

    

          

  

          

          

            
Assigned Tags
                
      
        
      
      
      
    
      
  
      

      



  
      
    
      
      
      
        
      
          

      
  
      
      
      Be the first to leave a comment      
      
              
      
                You must be Logged on to comment or reply to a post.