TypeScript使用PdfMakeWrapper如何将二维码叠加到PDF内的图片上

你当前代码的问题在于两个核心点：

• PdfMake默认是流式布局，所有通过pdf.add()添加的元素会按顺序纵向排列，底框SVG和二维码是两个独立元素，自然会上下分开排布
• 每个SVG都设置了fit([400, 300])，四个元素总高度超过单页PDF的最大高度，触发自动分页。

调整方案 #

你可以用PdfMake的stack层叠容器实现元素叠加，同时压缩元素的适配尺寸避免分页，修改后的代码如下：

async generatePDF(ID_PRODUCT: string) {
  PdfMakeWrapper.setFonts(pdfFonts);
  const pdf: PdfMakeWrapper = new PdfMakeWrapper();
  
  // 标题：缩小适配尺寸避免占用过多高度
  pdf.add(
    await new Img('../../assets/images/General/Store_QR_Title.svg')
      .fit([350, 80])
      .alignment("center")
      .margin([0, 20, 0, 10])
      .build()
  );

  // 底框+二维码层叠容器，容器内元素按顺序层叠，后添加的元素在上方
  const qrBlock = new Stack([
    // 底层：底框SVG
    await new Img('../../assets/images/General/Store_QR_Code.svg')
      .fit([300, 200])
      .alignment("center")
      .build(),
    // 上层：二维码，通过margin调整位置刚好落在底框内
    new QR(this.URL_FRONT_STORE + 'sale/product/' + ID_PRODUCT + '/95788568-dded-11eb-ba90-1356ac135013')
      .fit(160)
      .alignment("center")
      .margin([0, 20, 0, 0]) // 上边距可根据底框实际样式微调，保证二维码在底框内居中
      .end
  ]).end;
  pdf.add(qrBlock);
  
  // 页脚：缩小适配尺寸
  pdf.add(
    await new Img('../../assets/images/General/Store_QR_Footer.svg')
      .fit([350, 80])
      .alignment("center")
      .margin([0, 10, 0, 20])
      .build()
  );

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

可选替代方案 #

如果stack的margin调整达不到预期效果，也可以给二维码设置绝对定位，手动指定摆放坐标：

new QR(你的二维码链接)
  .fit(160)
  .absolutePosition(150, 120) // 第一个参数为x坐标，第二个为y坐标，单位为pt，可根据实际效果微调
  .end

调试验证提示 #

• 可以先把所有元素的fit尺寸再适当调小，先保证所有元素能放在同一页，再微调位置
• 可以提前通过pdf.pageSize('A4')指定固定页面尺寸，避免不同场景下的页面尺寸适配问题

内容的提问来源于stack exchange，提问作者The Grumpy Lion