Skip to Content

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

To report this post you need to login first.

20 Comments

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

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

    (0) 
      1. 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!)

        (0) 
    1. Frei Patrick

      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

      (0) 
  2. Patrick Schmitt

    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

    (0) 
  3. Gerardo Rendina

    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

    (0) 
  4. 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

    (0) 
  5. Antonino Cacace 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

    (0) 
  6. 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

    🙂

    (0) 
    1. 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

      (0) 
  7. Shilpa Girish Pai

    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.

    (0) 

Leave a Reply