Incorporating TypeScript and PdfMakeWrapper library, I am creating PDFs on a website integrated with svg images and QR codes. Below is a snippet of the code in question:
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;
}
This function comprises four main components: title, outline (to place the QR code), QR code, and a footer. The objective is to overlay the QR code onto the outline image within a single page layout, as depicted here:
https://i.sstatic.net/DwKmjm.png
However, presently, running the code generates a two-page PDF like so:
https://i.sstatic.net/9H4pbm.png
To achieve the desired outcome of placing the QR code over the outline image, what modifications should be made in the code?