Skip to Content
Author's profile photo Former Member

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:

/wp-content/uploads/2014/07/pdf2_503340.png

/wp-content/uploads/2014/07/pdf3_503341.png

                                                                         pdf-browser

and the github repo:

Antoninjo/DesignStudioPDFExportComponent · GitHub

That’s it.

I hope that it will be useful.

Cheers

AC

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mike Howles
      Mike Howles

      Antonio - Great post.  I've looked at a few various implementations to achieve the Holy Grail of exporting with pure JS, but unfortunately IE seems to always be the pesky black sheep, doesn't it?  🙂

      For Chrome/Mozilla customers, I think this is a great option, though.  Thank you for sharing.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Actually it works in chrome and firefox, i'm trying to let it works in ie11

      Author's profile photo Mike Howles
      Mike Howles

      Right, it seems like IE is always the lone problem child 🙂

      If you get it to work in IE, I'd be very interested, but masses of HTML5 coders have already tried, but I wish you the best of luck!  I've only seen brittle examples of it working in IE (not trying to deter you, though!)

      Author's profile photo Mike Howles
      Mike Howles

      I think I remember this being an IE9 limitation, so you may have success with IE10 and above after all!

      Based on results from the library you are using, this demo did work on IE11.

      http://eligrey.com/demos/FileSaver.js/

      Author's profile photo venkatesh guttikonda
      venkatesh guttikonda

      Hi-

      while installing component in the design studio. its giving the error

      All Components are not found.

      Author's profile photo Former Member
      Former Member

      Hi,

      I'm trying to install it with the latest Design Studio version but get the following error:

      Failed to discover all connectors. RepositoryDiscoveryStrategy failed with an error Failed to process repository contents No repository found at jar:file:/C:/Users/abc/Desktop/master.zip!/.

      Do you have an idea what could be the problem?

      Thanks and best regards,

      Patrick

      Author's profile photo Former Member
      Former Member

      Hi Antonio,

      many thanks for sharing this extension.

      It works fine. The export is even possible in IE.

      But sometimes I get the following error message:

      SCRIPT5022: Mismatched anonymous define() module: function() {

          return saveAs;

        }

      http://requirejs.org/docs/errors.html#mismatch

      combined_dynamic_includes_1407395057699101315887.js, Row 8737 Sign 9

      Do you have any idea how to solve this

      or what could be the reason?

      Thanks a lot in advance

      Kind regards

      PM

      Author's profile photo Former Member
      Former Member

      Hi Antonio,

      I get the following error message:

      SCRIPT5022: Mismatched anonymous define() module: function() {

          return saveAs;

        }

      http://requirejs.org/docs/errors.html#mismatch

      How i can fix this?

      Regards,

      Author's profile photo Former Member
      Former Member

      Hello experts,

      I have a problem by creating a deployable feature with this pdf export function.

      Creating the features with the SAP examples was no problem, but it doesn't work with that one.

      Error Message:

      Image 2015-01-30-3.jpg

      Has anybody already created a deployable feature with the pdf export functionality?

      Best regards,

      Gerardo

      Author's profile photo Cesar Buendia Rios
      Cesar Buendia Rios

      Hi all, I have a problem with this component when execute my report in BI Platform or on Netweaver Portal the system send me a error message. (image)  and when printing on Internet Explorer (11) the result don't show me the graph components.

      Any sugestion, thanks?.

      Error_1.png

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Antonio,

      we have combined many components in the community package - do you wnat to join and place also this one together?

      I would have some ideas how we can incorporate this component into the app I have created based on all community components (blog: Community SDK: First Functional Application with SDK Components (Online Composition))

      The blog from Mike - SCN Design Studio SDK Development Community

      Karol

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Guys!

      Actually i change work and i can't work any more on this component(because i don't work with DS at the time).

      I'll glad to help whoever wants to work with the component or improve it.

      Karol you can try to use it and test it(if it works).

      Thanks to all.

      Antonino

      Author's profile photo Michael Jennings
      Michael Jennings

      Hi All,

          I get the same error reported by XXX

      --------ERROR------

      Failed to discover all connectors. RepositoryDiscoveryStrategy failed with an error Failed to process repository contents No repository found at jar:file:/C:/Users/Desktop/FileName.zip

      --------------------------

      Anyone solve this issue ?

      Best Regards,

      MJ

      🙂

      Author's profile photo Tammy Powlas
      Tammy Powlas

      Hi - as Antonio said he is not working on this any more, you could try the PDF export available from this free trial:

      Visualbi.com/DSXTrial


      I just tried it and it works

      Author's profile photo Michael Jennings
      Michael Jennings

      Thanks Tammy.

      Best Regards,

      MJ

      🙂

      Author's profile photo Karol Kalisz
      Karol Kalisz

      I will try to bring this code into community repository. Stay tuned 😉

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Michael, all friends of SDK,

      thanks to Antonino this component is now part of the community package, a bit adjusted and extended, see here for use: Design Studio SDK: PDF Print Component

      Karol

      Author's profile photo Former Member
      Former Member

      Hi All,

      Found a solution for exporting SVG charts on IE 11 using canvg.

      I replaced svgAsDataURI with following lines:

      var oCanvas = document.createElement("canvas");

      var svgData = new XMLSerializer().serializeToString(this);

      canvg(oCanvas, svgData);

      img.src = oCanvas.toDataURL("image/png");

      parent.appendChild(img);

      $(svg).hide();

      img.onload = function(){

      };


      Hope this helps.

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Shilpa,

      you mean those lines:

      https://github.com/org-scn-design-studio-community/sdkpackage/blob/master/src/org.scn.community.utils/res/PdfPrint/PdfPrint.js#L52-L65

      should be replaced by your code?

      and, this is for IE11 only or for other browsers as well?

      Karol

      Author's profile photo Former Member
      Former Member

      Yes Karol those lines L52 - L64.

      It works for Chrome and Forefox along with IE.

      I am not sure about SDK component with SVG charts though.

      Shilpa.