yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
654 stars 101 forks source link

how to import svg2pdf library to an angular project? #73

Closed Solangetatiana closed 5 years ago

Solangetatiana commented 5 years ago

Hi,

Thanks for this library!

Great library to export SVG on PDF, but now I need to import to an angular project and I'm not getting.

How to import the library to an angular project?

I've already tried this:

1) npm install svg2pdf.js --save

2) import * as svg2pdf from 'svg2pdf'; //not working

NOTE: The same steps works with library jspdf: 1) npm install jspdf --save

2) import * as jsPDF from 'jspdf';

3) public download() { var doc = new jsPDF(); doc.text(20, 20, 'Hello world!'); doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); doc.addPage(); doc.text(20, 20, 'Do you like that?');

// Save the PDF
doc.save('Test.pdf');

}

Solangetatiana commented 5 years ago

I get using: import * as svg2pdf from 'svg2pdf.js';

But step 3, not working yet: NOTE: alert('teste 3'); works and alert('teste 4'); is not working...

3) public download2() {

      var svgElement = document.getElementById('svg');
      var width = 300;
      var height = 200;

      // create a new jsPDF instance
      const pdf = new jsPDF('l', 'pt', [width, height]);

alert('teste 3');

      // render the svg element
      svg2pdf(svgElement, pdf, {
        xOffset: 0,
        yOffset: 0,
        scale: 1
      });
alert('teste 4');

      // get the data URI
      const uri = pdf.output('datauristring');

      // or simply save the created pdf
      pdf.save('myPDF.pdf');

}

Solangetatiana commented 5 years ago

I get using import * as svg2pdf from 'svg2pdf.js'; on step 1.

But step 3 is not working yet - alert('3') works, but alert('4') not works:

public download2() {

      var svgElement = document.getElementById('svg');
      var width = 300;
      var height = 200;

      // create a new jsPDF instance
      const pdf = new jsPDF('l', 'pt', [width, height]);
alert('teste 3');
      // render the svg element
      svg2pdf(svgElement, pdf, {
        xOffset: 0,
        yOffset: 0,
        scale: 1
      });
alert('teste 4');

      // get the data URI
      const uri = pdf.output('datauristring');

      // or simply save the created pdf
      pdf.save('myPDF.pdf');

}

yGuy commented 5 years ago

If you think this really is an issue in svg2pdf and not an issue in your code, please file a proper bug report (what do you think the issue templates are for?). This sounds like a question for StackOverflow or a generic angular/webpack/javascript question, though, because obviously you don't even get the import in your code to run.

Solangetatiana commented 5 years ago

Hi!

Now I've tried again, but using that:

1) npm install jspdf-yworks --save npm install svg2pdf.js --save

2) After I've started "debug" by adding "alerts" to find where could be the problem in some function, etc..

And I discovered that inside the function "var svg2pdf = function (element, pdf, options) ", exists a line that calls "renderNode". And it is after this line that nothing works. Searching, I found that cloneNode doesn't work with Angular (Neither AngularJS ou any versions after). And renderNode is all based in nodes... I've already use this library, but with an normal javascript/jquery project. And now, I would like to continue using this library svg2pdf but now with Angular if possible... Any sugestions for me?

renderNode (element.cloneNode(true), _pdf.unitMatrix, refsHandler, false, false, attributeState);