Design Studio 1.3 SDK – PDF Export Button

Hi there!

Today i want to share with you my second “self-made” component.

Since SAP DS1.3 still does not have a built-in pdf export system, i implemented a component by myself.

The component is client side(totally javascript), so it could not work with some browsers (IE).

I used many MIT Licensed javascript libraries.

First of all, the jsInclude tags in “contribute.xml”

<jsInclude>res/js/jspdf.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.addhtml.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.addimage.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.autoprint.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.cell.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.from_html.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.javascript.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.png_support.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.sillysvgrenderer.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.split_text_to_size.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.standard_fonts_metrics.js</jsInclude>
<jsInclude>res/js/jspdf.plugin.total_pages.js</jsInclude>
<jsInclude>res/js/html2canvas.js</jsInclude>
<jsInclude>res/js/FileSaver.js</jsInclude>
<jsInclude>res/js/component.js</jsInclude>

As you can see, i use a set js files from jspdf library – Link here : MrRio/jsPDF · GitHub

Then html2canvas that jspdf requires for working. html2canvas

And finally FileSaver.js that jspdf uses for saving pdf. eligrey/FileSaver.js · GitHub

Followin my component.js code:

this.init = function() {
  this.button   = document.createElement("button");
  this.button.type = "button";
  this.button.innerHTML = text;
  this.$().append($(this.button));
};

In the init function, i create and append the button to the handler div.

//FUNCTION CALLED AFTER RENDERING
this.afterUpdate = function() {
            that.$().click(function() {
            that.fireEvent("onclick");
            var svgElements = $('body').find('svg');
            svgElements.each(function(){
                 var svg = this;
                 var img = document.createElement("img");
                 img.className = "screenShotTempCanvas";
                 svgAsDataUri(this,1,function(uri){
                      svg.className = "tempHide";
                      $(svg).hide();
                      var parent = svg.parentNode;
                      img.src=uri;
                      parent.appendChild(img);
                      img.onload = function(){
                      };
            });
  });

Since jspdf library cant process svg part of code i have to convert them in something else, i choose to convert all the svg tags of the application in base64 images. In the code above i look for all the svg tags in the document and then i replace them with img tag containg themselves as Base64 image.

var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
  if(pdfMethod == 1){
            pdf.output('save','example.pdf');
  }else if(pdfMethod == 2){
           pdf.output('dataurlnewwindow');
  }else{
           pdf.output('datauri');
  } $('body').find('.screenShotTempCanvas').remove();
           $('svg').show();
  });
});
that.button.innerHTML = text;
};

Then i use jspdf addHTML method to generate a pdf with all the visible content of the page(including the img tags created before) and, basing on pdfMethod variable, save the file or open it in new or same window. Then i remove all the img tags and show again the svgs.

Here some screenshot of the results:

                                                                         pdf-browser

and the github repo:

Antoninjo/DesignStudioPDFExportComponent · GitHub

That’s it.

I hope that it will be useful.

Cheers

AC