CODEWITHSUNDEEP
javascriptangulartypescriptpdfqr-code
The Grumpy Lion
The Grumpy Lion

Reputation: 173

TypeScript - How to put a QR code over an image in a pdf?

I'm using TypeScript with the PdfMakeWrapper library on a website to produce a pdf with some svg images and a QR code in it. The relevant bit of my code is as follows:

  async generatePDF(ID_PRODUCT: string) {
 
    PdfMakeWrapper.setFonts(pdfFonts);
    const pdf: PdfMakeWrapper = new PdfMakeWrapper();
    
    //Title
    pdf.add(await new Img('../../assets/images/General/Store_QR_Title.svg').fit([400, 300]).alignment("center").margin([30, 0, 0, 30]).build());

    //Outline
    pdf.add(await new Img('../../assets/images/General/Store_QR_Code.svg').fit([400, 300]).alignment("center").margin([30, 0, 0, 30]).build());
     
    //QR Code
    pdf.add(new QR(this.URL_FRONT_STORE + 'sale/product/' + ID_PRODUCT + '/95788568-dded-11eb-ba90-1356ac135013').fit(250).alignment("center").end);
    
    //Footer
    pdf.add(await new Img('../../assets/images/General/Store_QR_Footer.svg').fit([400, 300]).alignment("center").margin([30, 0, 0, 30]).build());

    let data = {
      PDF: pdf.create(),
      URL_PRODUCT: this.URL_FRONT_STORE + 'sale/product/' + ID_PRODUCT
    }
    return data;
  }

As you can see there are four main elements here: title (svg image), an outline to place the QR code (svg), the QR code, and a footer (svg). What I want to do is to put the QR code on top of the outline image. This is what I aim to do (in a single page):

enter image description here

However, this is the current result that my code produces (in a two-page pdf):

enter image description here

What do I need to change in my code if I want to place the QR code on top of the outline image?

Upvotes: 0

Views: 1060

Answers (1)

The Grumpy Lion
The Grumpy Lion

Reputation: 173

OP here, I finally solved this by adding an absolutePosition(x,y) attribute to the QR Code element, something like this:

//QR Code
    pdf.add(new QR(this.URL_FRONT_STORE + 'sale/product/' + ID_PRODUCT + '/95788568-dded-11eb-ba90-1356ac135013').fit(250).absolutePosition(24, 240).alignment("center").end);

Leaving an answer for future reference in case someone else runs into this issue.

Upvotes: 2

Related Questions