Styjun

What dog breeds survive the apocalypse for generations?

Using chord iii in a chord progression (major key)

Getting a similar picture (colours) on Manual Mode while using similar Auto Mode settings (T6 and 40D)

Holding rent money for my friend which amounts to over $10k?

Polynomial division: Is this trick obvious?

Why are goodwill impairments on the statement of cash-flows of GE?

Is the seat-belt sign activation when a pilot goes to the lavatory standard procedure?

Why would company (decision makers) wait for someone to retire, rather than lay them off, when their role is no longer needed?

Why would someone open a Netflix account using my Gmail address?

Understanding Python syntax in lists vs series

How will the lack of ground stations affect navigation?

How might a landlocked lake become a complete ecosystem?

Why did Varys remove his rings?

Could a space colony 1g from the sun work?

Is there an academic word that means "to split hairs over"?

Will consteval functions allow template parameters dependent on function arguments?

It is as easy as A B C, Figure out U V C from the given relationship

Does the Rogue's Reliable Talent feature work for thieves' tools, since the rogue is proficient in them?

Network latencies between opposite ends of the Earth

Why does SSL Labs now consider CBC suites weak?

What is the effect of the Feeblemind spell on Ability Score Improvements?

Given 0s on Assignments with suspected and dismissed cheating?

How much outgoing traffic would a HTTP load balance use?

What is this weird d12 for?

Cannot print d3js svg via jspdf

What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?Do I use <img>, <object>, or <embed> for SVG files?HTML5 Canvas vs. SVG vs. divSVG fill color transparency / alpha?How can I remove or replace SVG content?How to change color of SVG image using CSS (jQuery SVG image replacement)?Canvas toDataURI() on chrome security issued3js and svg for printing to multiple pagesHow to implement svg pattern via d3js?Trying to draw SVG to canvas, why is my SVG XML getting truncated?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I want to print a svg chart I created with d3.js by using jspdf

I get the svg node and serialize it. Then create an image by defining its src.
Then I draw the image on canvas element and convert the canvas to data url that I use to add image via pdfjs.

at the component where I create the svg

public svgToDataURL()
 const svg = this.svg,
 img = new Image(),
 serializer = new XMLSerializer(),
 svgStr = serializer.serializeToString(svg.node());

 img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
 console.log(img.src)

 const canvas = document.createElement("canvas");

 canvas.width = this.width;
 canvas.height = this.height;
 canvas.getContext("2d").drawImage(img,0,0,this.width,this.height);
 return canvas.toDataURL("image/png");
 ;

at the component where I print the svg

 @ViewChildren(RadarChart) radarCharts: QueryList<RadarChart>;

 renderRadarsPDF() 
 const doc = new jsPDF();
 const uris = this.radarCharts.forEach((r, index) => 
 const url = r.svgToDataURL();
 doc.addImage(url, "PNG", 10, (index * 420) + 10, 400, 420);
 );
 doc.save('Test.pdf');
 

It doesnt throw an error but it prints a blank space. Also when I try to display the data url in browser it is blank

angular d3.js svg pdfjs

share|improve this question

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

add a comment | 

0

I want to print a svg chart I created with d3.js by using jspdf

I get the svg node and serialize it. Then create an image by defining its src.
Then I draw the image on canvas element and convert the canvas to data url that I use to add image via pdfjs.

at the component where I create the svg

public svgToDataURL()
 const svg = this.svg,
 img = new Image(),
 serializer = new XMLSerializer(),
 svgStr = serializer.serializeToString(svg.node());

 img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
 console.log(img.src)

 const canvas = document.createElement("canvas");

 canvas.width = this.width;
 canvas.height = this.height;
 canvas.getContext("2d").drawImage(img,0,0,this.width,this.height);
 return canvas.toDataURL("image/png");
 ;

at the component where I print the svg

 @ViewChildren(RadarChart) radarCharts: QueryList<RadarChart>;

 renderRadarsPDF() 
 const doc = new jsPDF();
 const uris = this.radarCharts.forEach((r, index) => 
 const url = r.svgToDataURL();
 doc.addImage(url, "PNG", 10, (index * 420) + 10, 400, 420);
 );
 doc.save('Test.pdf');
 

It doesnt throw an error but it prints a blank space. Also when I try to display the data url in browser it is blank

angular d3.js svg pdfjs

share|improve this question

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

add a comment | 

I want to print a svg chart I created with d3.js by using jspdf

I get the svg node and serialize it. Then create an image by defining its src.
Then I draw the image on canvas element and convert the canvas to data url that I use to add image via pdfjs.

at the component where I create the svg

public svgToDataURL()
 const svg = this.svg,
 img = new Image(),
 serializer = new XMLSerializer(),
 svgStr = serializer.serializeToString(svg.node());

 img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
 console.log(img.src)

 const canvas = document.createElement("canvas");

 canvas.width = this.width;
 canvas.height = this.height;
 canvas.getContext("2d").drawImage(img,0,0,this.width,this.height);
 return canvas.toDataURL("image/png");
 ;

at the component where I print the svg

 @ViewChildren(RadarChart) radarCharts: QueryList<RadarChart>;

 renderRadarsPDF() 
 const doc = new jsPDF();
 const uris = this.radarCharts.forEach((r, index) => 
 const url = r.svgToDataURL();
 doc.addImage(url, "PNG", 10, (index * 420) + 10, 400, 420);
 );
 doc.save('Test.pdf');
 

It doesnt throw an error but it prints a blank space. Also when I try to display the data url in browser it is blank

angular d3.js svg pdfjs

share|improve this question

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

public svgToDataURL()
 const svg = this.svg,
 img = new Image(),
 serializer = new XMLSerializer(),
 svgStr = serializer.serializeToString(svg.node());

 img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
 console.log(img.src)

 const canvas = document.createElement("canvas");

 canvas.width = this.width;
 canvas.height = this.height;
 canvas.getContext("2d").drawImage(img,0,0,this.width,this.height);
 return canvas.toDataURL("image/png");
 ;

 @ViewChildren(RadarChart) radarCharts: QueryList<RadarChart>;

 renderRadarsPDF() 
 const doc = new jsPDF();
 const uris = this.radarCharts.forEach((r, index) => 
 const url = r.svgToDataURL();
 doc.addImage(url, "PNG", 10, (index * 420) + 10, 400, 420);
 );
 doc.save('Test.pdf');
 

angular d3.js svg pdfjs

angular d3.js svg pdfjs

share|improve this question

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

share|improve this question

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686

asked Mar 23 at 15:17

Jakub BaresJakub Bares

686