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, 2018 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

  • Feb 27, 2018 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"'));
      
      
          }