How to use canvg and svg to pdf in angular 2?

Question

This is my Script Code. I m using JSPdf.

//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  //Get svg markup as string
  var svg = document.getElementById('svg-container').innerHTML;

  if (svg)
    svg = svg.replace(/\r?\n|\r/g, '').trim();

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');


  context.clearRect(0, 0, canvas.width, canvas.height);
  canvg(canvas, svg);


  var imgData = canvas.toDataURL('image/png');

  // Generate PDF
  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
  doc.save('test.pdf');

}

i added this script in index.html

  <script src="assets/canvg.js"></script>

We need add canvg script file and use the canvg function in Component. How to use the file in angular 2?

score 0 · Answer 1 · answered Jul 26 '18 at 12:49

In 'canvg.js' script I've removed logic for 'jsdom' from row 26 like this:

var nodeEnv = false;
var windowEnv = window, ImageClass, CanvasClass,
    defaultClientWidth = 800, defaultClientHeight = 600;
if (!windowEnv.DOMParser) {

And forward I've flowed steps from: Link

let svg = test.outerHTML;
if (svg) {
  svg = svg.replace(/\r?\n|\r/g, '').trim();
}
const canvas = document.createElement('canvas');
canvg(canvas, svg, {});
const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 40, 40, 75, 75);
pdf.save('pdf_file.pdf');

And works fine for me.

How to use canvg and svg to pdf in angular 2?

1 Answers1