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

107
September 08, 2021, at 06:40 AM

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

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

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

Answer 1

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.

Rent Charter Buses Company
READ ALSO
Python-shell problem after packaging my app with electron builder (Node Js)

Python-shell problem after packaging my app with electron builder (Node Js)

I finished my electron/node js & Python app (a steganography tool)So I'd like to package it to distribute it on github with a dmg, exe

90
Sharing Session object and MIME message in java mail API and authentication details sharing

Sharing Session object and MIME message in java mail API and authentication details sharing

My application needs to send generated email from appointments

84
CSS only works while logged in as admin on Wordpress

CSS only works while logged in as admin on Wordpress

When I am logged into Wordpress CSS works, when I logged out - CSS doesn't work

92
How to send the errors in Action(Redux) to the Frontend(React)?

How to send the errors in Action(Redux) to the Frontend(React)?

So I am building a MERN stack application that does have a login functionalityWhenever the user sends the wrong credentials, I am throwing an error through res

92