Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addSvgAsImage method does not display svg image with Angular 8

See original GitHub issue

Hello.

I try to add a svg image into my pdf. here is the code :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { jsPDF } from 'jspdf';

@Injectable({
  providedIn: 'root'
})
export class GeneratePdfService {
  doc: jsPDF;

  constructor(
    private http: HttpClient
  ) {
    this.doc = new jsPDF('p', 'pt', 'a4');
  }

  async generate(): Promise<void> {
    await this._addHeader();
    await this._addBody();
    this.doc.save('test.pdf');
  }

  async _addHeader(): Promise<void> {
    // let logo: string = await this.http.get('../../../../assets/images/building-flat-shadow.svg', { responseType: 'text' }).toPromise();
    let logo:string = '<svg xmlns="http://www.w3.org/2000/svg" width="66" height="48" viewBox="0 0 66 48">'+
// ...
    '</svg>';
    this.doc.addSvgAsImage(logo, 20, 20, 66, 48, '', false);
  }

  async _addBody(): Promise<void> {
    
  }
}

I get an error message : Cannot read property 'fromString' of undefined

And svg image is not in the saved pdf. Could you help me please ? Thanks.

Issue Analytics

State:
Created 3 years ago
Comments:8

Top GitHub Comments

5reactions

doox911-opensourcecommented, Apr 22, 2021

Yes, this is a known issue and was fixed with #2981. There will be a new release in the next couple of weeks.

My svg:

<svg width="234px" height="74px" x="0px" y="0px" viewBox="0 0 234 74" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="234" height="74" style="fill:#ffffff;"/><g transform="translate(10, 10)" style="fill:#000000;"><text style="font: 12px monospace" text-anchor="start" x="0" y="54">2</text></g><g transform="translate(34, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g><g transform="translate(40, 10)" style="fill:#000000;"><rect x="6" y="0" width="2" height="40"/><rect x="10" y="0" width="4" height="40"/><rect x="20" y="0" width="2" height="40"/><rect x="24" y="0" width="4" height="40"/><rect x="30" y="0" width="2" height="40"/><rect x="36" y="0" width="6" height="40"/><rect x="44" y="0" width="2" height="40"/><rect x="50" y="0" width="6" height="40"/><rect x="62" y="0" width="4" height="40"/><rect x="68" y="0" width="2" height="40"/><rect x="72" y="0" width="2" height="40"/><rect x="78" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">990000</text></g><g transform="translate(124, 10)" style="fill:#000000;"><rect x="2" y="0" width="2" height="48"/><rect x="6" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="5" y="62"></text></g><g transform="translate(134, 10)" style="fill:#000000;"><rect x="0" y="0" width="6" height="40"/><rect x="10" y="0" width="2" height="40"/><rect x="14" y="0" width="6" height="40"/><rect x="24" y="0" width="2" height="40"/><rect x="28" y="0" width="4" height="40"/><rect x="36" y="0" width="4" height="40"/><rect x="42" y="0" width="4" height="40"/><rect x="50" y="0" width="4" height="40"/><rect x="56" y="0" width="4" height="40"/><rect x="64" y="0" width="4" height="40"/><rect x="70" y="0" width="2" height="40"/><rect x="76" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">001115</text></g><g transform="translate(218, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g></svg>

    const pdf = new JsPDF('l', 'mm', [98, 150]);
    pdf.addFont('Roboto-Medium-normal.ttf', 'Roboto-Medium', 'normal');
    pdf.setFont('Roboto-Medium');

    pdf.setFontSize(14);

    pdf.addSvgAsImage(svg, 1, 1, 100, 100, '', false);

    pdf.save('label.pdf');

But I can’t see the svg in the pdf?

2reactions

RostVYcommented, Jul 19, 2022

There’s the issue that addSvgAsImage() is asynchronous. The code from this method:

    ...
    var doc = this;
    return loadCanvg().then(function (canvg) {
      return canvg.fromString(ctx, svg, options);
    }, function () {
      return Promise.reject(new Error("Could not load canvg."));
    }).then(function (instance) {
      return instance.render(options);
    }).then(function () {
      doc.addImage(canvas.toDataURL("image/jpeg", 1.0), x, y, w, h, compression, rotation);
    });

and when I do something like

doc.addSvgAsImage(imgData, 20, 50, 17, 20 );
doc.save('filename');

save() method is executed earlier than doc.addImage(…)

It worked for me when I put doc.save() into small setTimeout(). The other solution would be to convert SVG to JPEG and use addImage() method instead of addSvgAsImage().