I would like to use the svg2pdf.js library in an Angular project

[Solangetatiana]

I would like to use the svg2pdf.js library in Angular projects.

I've started "debugging" by adding "alerts" to find where could be the problem in some function in svg2pdf when working in an Angular project,

And I discovered that inside the function "var svg2pdf = function (element, pdf, options) ", exists a line that calls "renderNode". And after this line, 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, on a javascript/jquery project. And 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);

NOTE: Before tried to use the library, I've run the following npm install:

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

[Solangetatiana]

related to this issue: https://github.com/yWorks/svg2pdf.js/issues/73

[yGuy]

Please, please, please stick to the rules and provide a self-contained example (e.g. a repository) that reproduces the issue.

There is an issue template that describes exactly what kind of issues this issue tracker will be tracking and how you should be reporting issues.

If you keep spamming the bug report system with useless cries for help, I will block you from "contributing" to this tracker.

Issues can always be reopened, so if you manage to actually provide the required information and provide proof that this is an issue with svg2pdf and not with angular or some angular build system, then fine and we can reopen the issue. Simply opening a new issue with the some contents does not increase anyone willingness to help you. It just annoys those that are willing to help others.

[Solangetatiana]

Hi!

This is the git repository: https://github.com/Solangetatiana/ionic_angular_plus_svg2pdf

After download and run in cmd prompt at directory "ionic4_angular7_plus_svg2pdf"the command lines listed below, we will have the directories \node_modules\svg2pdf.js and \node_modules\jspdf-yworks,.

npm install -g ionic
npm install jspdf-yworks --save
npm install svg2pdf.js --save
ionic serve
install @angular/cli? Yes

So, in directory node_modules\svg2pdf.js\dist 1 -I renamed svg2pdf.min to svg2pdf.min.min (any oher name or even delete this file) 2- I renamed svg2pdf.js to svg2pdf.min.js to put some alerts inside var svg2pdf = function (element, pdf, options) {:

  // the actual svgToPdf function (see above)
  var svg2pdf = function (element, pdf, options) {
    _pdf = pdf;

    var k = options.scale || 1.0,
        xOffset = options.xOffset || 0.0,
        yOffset = options.yOffset || 0.0;

     _pdf.advancedAPI(function () {

      // set offsets and scale everything by k
      _pdf.saveGraphicsState();

      _pdf.setCurrentTransformationMatrix(new _pdf.Matrix(k, 0, 0, k, xOffset, yOffset));

      // set default values that differ from pdf defaults
      var attributeState = AttributeState.default();
      _pdf.setLineWidth(attributeState.strokeWidth);
      var fill = attributeState.fill;
      _pdf.setFillColor(fill.r, fill.g, fill.b);
      _pdf.setFont(attributeState.fontFamily);
      _pdf.setFontSize(attributeState.fontSize);

alert('mais um teste');
      var refsHandler = new ReferencesHandler(element);
alert('mais um teste2');     
      renderNode(element.cloneNode(true), _pdf.unitMatrix, refsHandler, false, false, attributeState);
alert('mais um teste3');

      _pdf.restoreGraphicsState();

    });

    return _pdf;
  };

How the alert('mais um teste3'); does not work, so I guessed there was some issue when calling renderNode, I made some changes to find out what parameters weren't working in this function and dicovered that parameter element.cloneNode(true) was the parameter that doesn't works. So, after researches, I found the reason: "nodes" does not work with Angular.

Now, I'm searching some way to make svg2pdf.js library works to Angular projects. Any sugestions will be apreciated. Or perhaps it could be a suggestion for enhancement to support Angular projects as well.

My apologies about post this new issue number.

[yGuy]

For anybody who finds this: svg2pdf works perfectly in Angular projects - if something doesn't work, then it's either the fault of Angular or the application.

[Solangetatiana]

Could you indicate a repository with angular example + svg2pdf that works?

So I could compare what I'm doing wrong.

[yGuy]

Please: before you file a bug report the next time against any library (be it svg2pdf, ionic, angular, or whatever), please first learn how to debug properly - it was totally obvious that you were passing "null" as the element to convert to the library. A simple "break on exception" showed the problem in your code, immediately.

I fixed it for you: https://github.com/Solangetatiana/ionic_angular_plus_svg2pdf/pull/1

Of course this was not an issue with neither angular or svg2pdf

[Solangetatiana]

Thank you a lot!