Skip to Content

Print Viz chart in PDF file

Hello Experts,

I want to print my Viz chart in pdf file.

Can you please help me on this ?

Thanks

Deborshi

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Feb 27 at 01:21 PM

    Hi,

    You want to do it using code? Is the chrome print to PDF option is a valid one?

    If the answer is yes to both questions then try this

    window.print( )

    and then the user chooses the print to PDF option.

    Also, take a look at this.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi,

      I created a working example. Clicking on the print button and following my original answer would lead to the desired result. You can use the code in the controller, thus not showing the button.

      The example was adjusted from here.

  • Feb 27 at 03:18 PM

    One option is to use jsPDF and draw the chart svg into a canvas image

    Here a JSFiddle.

    The main code is this one:

            var chart = this.getView().byId('samplevizframe'); // I get the chart
    	var svg = chart.getDomRef().getElementsByTagName( "svg" )[0]; // I get the chart svg
    	var canvas = document.createElement( "canvas" ); //I create a new canvas with svg height and width
            var bBox = svg.getBBox();
            canvas.width = bBox.width;
            canvas.height = bBox.height;
            var context = canvas.getContext( "2d" ); //setting the drawing context
            var imageObj = new Image(); //Create a new image with svg metadata
    				imageObj.src = "data:image/svg+xml," + jQuery.sap.encodeURL(
    					svg.outerHTML.replace( /^<svg/, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"' ) );
            imageObj.onload = function() {
              context.drawImage( imageObj, 0, 0,  canvas.width, canvas.height); //Draw the image to the canvas
    	  dataURL = canvas.toDataURL('base64');
              const doc = new jsPDF('p', 'mm', 'a4'); // A4 landscape 297X210 //Create new jsPDF document
              doc.addImage(dataURL, 'jpg', 10, 20);	//add the image
              doc.save('chart_in_pdf'); //save the pdf
            };
    
    Add comment
    10|10000 characters needed characters exceeded

    • Hi,

      You can play with width and height of the char in doc.addImage function, here an example with landscape PDF page:

      doc.addImage(dataURL, 'JPEG', 10, 20, 277, 180);

      I also change the plunker a little bit because of an error message if you try to open the PDF with Acrobat Reader:

      onPress: function() {
            var chart = this.getView().byId('samplevizframe');
            var svg = chart.getDomRef().getElementsByTagName("svg")[0];
            var canvas = document.createElement("canvas");
            var bBox = svg.getBBox();
            canvas.width = bBox.width;
            canvas.height = bBox.height;
            var context = canvas.getContext("2d");
            context.fillStyle = "rgb(255,255,255)"; //Set the context background
            context.fillRect(0, 0, canvas.width, canvas.height); //apply the background the the chart rect
            var imageObj = new Image();
            imageObj.onload = function() {
              context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
              var dataURL = canvas.toDataURL('image/jpeg'); //Save as jpeg instead of base64
              var doc = new jsPDF('l', 'mm', 'a4'); // A4 landscape 297X210 
              var imgHeigth = 190 * (bBox.height / bBox.width);
              doc.addImage(dataURL, 'JPEG', 10, 20, 277, 180); //Download PDF with full page chart
              doc.save('chart_in_pdf');
            };
            imageObj.src = "data:image/svg+xml," + jQuery.sap.encodeURL(
              svg.outerHTML.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"'));
      
      
          }