svg2pdf.js icon indicating copy to clipboard operation
svg2pdf.js copied to clipboard

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

Open Solangetatiana opened this issue 5 years ago • 4 comments

"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();
  }

  1. 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

Solangetatiana avatar Oct 07 '20 11:10 Solangetatiana

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 avatar Oct 07 '20 13:10 yGuy

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

yGuy avatar Oct 07 '20 13:10 yGuy

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 ...

Solangetatiana avatar Oct 07 '20 15:10 Solangetatiana

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 ;-)

yGuy avatar Oct 12 '20 06:10 yGuy