Skip to Content
1

Print Viz chart in PDF file

Feb 27 at 12:18 PM

258

avatar image

Hello Experts,

I want to print my Viz chart in pdf file.

Can you please help me on this ?

Thanks

Deborshi

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Iftah Peretz
Feb 27 at 01:21 PM
0

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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Iftah

I have tried this code already. PDF file is opening but Viz graph is not coming.

Thanks

Deborshi

0

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.

0
Francesco Alborghetti Feb 27 at 03:18 PM
0

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
        };
Show 4 Share
10 |10000 characters needed characters left characters exceeded

Hi

I am getting following error

Uncaught ReferenceError: jsPDF is not defined at Image.imageObj.onload

i have declared jsPDF in index.html within script tag file as follows--

src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js" integrity="sha384-CchuzHs077vGtfhGYl9Qtc7Vx64rXBXdIAZIPbItbNyWIRTdG0oYAqki3Ry13Yzu" crossorigin="anonymous"


Can you please help me on this ?

Thanks

Deborshi

0

Hi Deborshi,

You should load external library as module definition in your controller (check this blog for more info).

First you need to download the library and put it into a folder in you project (e.g. utils or libs), then you can load them as module in the controller:

/* global jsPDF:true */
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"TestPDF/utils/jspdf.min"
], function(Controller, jspdf) {
...

I created a plunker with the folder structure here.

1

Hi Francesco Alborghetti ,

Thank you very much. Its working perfectly.

One small issue is formatting. the image is not fit in pdf page.

I have attached the PDF. Can you please help me on this? how to fit automatically in PDF file

?

Thanks

Deborshi

0

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"'));


    }

0