TypeScript - 如何将二维码放在 pdf 中的图像上?
TypeScript - How to put a QR code over an image in a pdf?
我在一个网站上使用带有 PdfMakeWrapper 库的 TypeScript 来生成一个包含一些 svg 图像和二维码的 pdf。我的代码的相关部分如下:
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;
}
如您所见,这里有四个主要元素:标题(svg图像),大纲放置二维码( svg)、QR 码 和 页脚 (svg)。我想要做的是将二维码放在轮廓图像的顶部。这就是我的目标(在一个页面中):
但是,这是我的代码生成的当前结果(在 two-page pdf 中):
如果我想将二维码放在轮廓图像的顶部,我需要在代码中更改什么?
OP 在这里,我最终通过向 QR 码元素添加 absolutePosition(x,y)
属性解决了这个问题,如下所示:
//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);
留下答案以备将来参考,以防其他人遇到此问题。
我在一个网站上使用带有 PdfMakeWrapper 库的 TypeScript 来生成一个包含一些 svg 图像和二维码的 pdf。我的代码的相关部分如下:
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;
}
如您所见,这里有四个主要元素:标题(svg图像),大纲放置二维码( svg)、QR 码 和 页脚 (svg)。我想要做的是将二维码放在轮廓图像的顶部。这就是我的目标(在一个页面中):
但是,这是我的代码生成的当前结果(在 two-page pdf 中):
如果我想将二维码放在轮廓图像的顶部,我需要在代码中更改什么?
OP 在这里,我最终通过向 QR 码元素添加 absolutePosition(x,y)
属性解决了这个问题,如下所示:
//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);
留下答案以备将来参考,以防其他人遇到此问题。