TypeScript

Question

我在一个网站上使用带有 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 中）：

如果我想将二维码放在轮廓图像的顶部，我需要在代码中更改什么？

Answer 1

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

留下答案以备将来参考，以防其他人遇到此问题。

TypeScript - 如何将二维码放在 pdf 中的图像上？

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

javascript

angular

pdf

qr-code