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
649 stars 98 forks source link

svg2pdf.js: "path" dont works on angular build --prod #157

Open Solangetatiana opened 3 years ago

Solangetatiana commented 3 years ago

"path" dont works on angular build --prod or even when file angular.json has the options below set to build in dev (the same when build --prod ):

            "aot": true,
            "optimization": true,

Steps to reproduce the behavior: Foloow the github link: https://github.com/Solangetatiana/example-path-svg2pdf

  1. 1 The SVG sample has rect, line, path and circle:
    
    <svg id="area_svg_print" xmlns="http://www.w3.org/2000/svg"
     width="400"
     height="400"
     viewBox="4.5 1.5 51 49"
     baseProfile="full" version="1.1" >
    <g id=desenho_total_print>
      <line x1="10" y1="7" x2="20" y2="17" style="stroke: green; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5"></line>
      <rect x="5" y="5" width="10" height="10" style="stroke: green; fill: none; stroke-width: 0.1;"></rect>
      <path d="M 10 12 Q 15 7 20 12 " style="stroke: green; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5"></path>
      <circle cx="10" cy="10" r="5" style="stroke: blue; fill: none; stroke-width: 0.1;" stroke-dasharray="0.5,0.5" />
    </g>
    </svg>
2.2

async createPDF() { const areaSvg = document.getElementById('area_svg_print'); const desenhoTotal = document.getElementById('desenho_total_print');

const pdf = new jsPDF('portrait', 'cm', [21.0, 29.6]);

await pdf.svg(areaSvg, { width: 21.0, height: 29.6 });
const uri = pdf.output('datauristring');
this.download(uri);

}

download(uri) { const link = document.createElement('a'); link.download = 'exemple.PDF'; link.href = uri; link.click(); }


2. I The result is: rect, line and circle were generated on the PDF, except path.

**Sample with the error **(npm start when the file angular.json with "aot": true and "optimization": true)**
ATTENTION: The same result as an angular build --prod**

https://github.com/Solangetatiana/example-path-svg2pdf/blob/main/src/assets/exemple_ERROR_path_BUILD_DEV_with_config_BUILD_PROD.PDF

**Sample without error **(npm start when the file angular.json with "aot": false and without option "optimization": true)****

https://github.com/Solangetatiana/example-path-svg2pdf/blob/main/src/assets/exemple_OK_BUILD_DEV_without_config_BUILD_PROD.PDF
yGuy commented 3 years ago

Thanks for your report! Angular is known to break software that wasn't written by the angular team itself ;-) Specifically their "optimizer" prefers smaller over working code. Which exact version of angular and the build optimizer are you using? And did you already try to debug the issue?

yGuy commented 3 years ago

Ah - this is about this set of versions - isn't it? So did you already try debugging it yourself?

Solangetatiana commented 3 years ago

Yes!! The package.json has the versions! Angular 8.

I don't have a clear idea of how to debug and how to get around this before generating the build with minified code ...

yGuy commented 3 years ago

Did you try with a more recent version of angular (newest version 9, or even 10?) I remember there were many issues in version 8. If you're looking to crash your software, use angular 8 "production" builds ;-)