vue 上传pdf加盖章之后生成新的pdf文件

Question

vue实现上传pdf然后在pdf文件上面加盖章然后导出pdf,目前生成pdf已经实现，使用的iframe渲染的pdf文件

```

```，但是生成的pdf没有显示之前的pdf文件只有加上去的盖章，有没有大佬知道怎么实现这个功能

Answer 1

引自免费微信小程序：皆我百晓生

1. 将原始pdf文件和盖章图片合并为新的pdf文件并显示

您可以使用pdf-lib库来操作pdf文件，将原始pdf文件和盖章图片合并为新的pdf文件。下面是一个基本的实现代码示例：

const { PDFDocument, StandardFonts, rgb } = require('pdf-lib');

async function generateStampedPDF(originalPDFPath, stampImagePath, outputPDFPath) {
  // 读取原始pdf文件
  const originalPDFBytes = fs.readFileSync(originalPDFPath);

  // 读取盖章图片
  const stampImageBytes = fs.readFileSync(stampImagePath);

  // 创建一个新的PDF文档
  const pdfDoc = await PDFDocument.create();

  // 将原始pdf文件添加到新文档
  const originalPDF = await PDFDocument.load(originalPDFBytes);
  const [originalPDFPage] = await pdfDoc.copyPages(originalPDF, [0]);
  pdfDoc.addPage(originalPDFPage);

  // 将盖章图片添加到新文档
  const stampImage = await pdfDoc.embedPng(stampImageBytes);
  const page = pdfDoc.getPages()[0];
  page.drawImage(stampImage, {
    x: 100,
    y: 100,
    width: 200,
    height: 100,
  });

  // 保存新的pdf文件
  const pdfBytes = await pdfDoc.save();
  fs.writeFileSync(outputPDFPath, pdfBytes);

  console.log('生成带盖章的pdf文件成功！');
}

// 使用示例
const originalPDFPath = '/path/to/original.pdf';
const stampImagePath = '/path/to/stamp.png';
const outputPDFPath = '/path/to/output.pdf';

generateStampedPDF(originalPDFPath, stampImagePath, outputPDFPath);

在上面的示例中，我们使用pdf-lib来加载原始pdf文件并将其添加到新的pdf文档中，然后在其中添加盖章图片。最后，我们保存新的pdf文件。

请注意： 上述示例中的路径是示例，请根据实际情况替换为您自己的文件路径。

1. 使用iframe显示两个pdf文件

如果您仍然希望在一个iframe中显示两个pdf文件，您可以尝试以下方法：

• 使用两个不同的iframe，分别加载原始pdf文件和带盖章的pdf文件，并通过CSS样式进行定位和层叠显示。

示例代码：

<iframe src="original.pdf" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"></iframe>
<iframe src="stamped.pdf" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;"></iframe>

在上面的示例中，我们创建两个iframe，分别加载原始pdf文件和带盖章的pdf文件，并通过CSS定位和层叠使它们叠加显示在一起。

请注意：这种方法只能用于展示目的，而不是进行实际的操作。

希望以上解决方案对您有所帮助！如果还有其他问题，请随时提问。