代码之家 › 专栏 › 技术社区 › Fjott

下一个js API:URL中使用查询参数的水印PDF

next.js pdf api

Fjott · 技术社区 · 3 年前

此API路由的目标是触发自动下载PDF,其中包含由API URL查询参数生成的自定义水印,如下所示: /api/PDFWatermark?id=123&firstname=John&lastname=Doe

为了创建我正在使用的水印 pdf-lib 我使用的是 this 代码水印我的PDF。生成原始PDF的修改和可下载版本 pdfDoc 我尝试使用 pdfBytes 水印。创建blob之后,我想我可以将它添加到连接到DOM的锚中。

当评论出 blob 和 anchor

ReferenceError:未定义Blob
引用错误:未定义文档

在这一点上,我只能打印 pdfBytes 作为json,我无法创建和下载实际的带水印的PDF文件。

pdfBytes 当调用API时,是否将其作为PDF文件?

更改后的工作代码如下 modifyPDF

const pdfBytes = await pdfDoc.save();
return Buffer.from(pdfBytes.buffer, 'binary');

以及:

export default async function handler(req, res) {
  const filename = "test.pdf";
  const {id, firstname, lastname} = req.query;
  const pdfBuffer = await modifyPDF(firstname, lastname, id);
  res.status(200); 
  res.setHeader('Content-Type', 'application/pdf');  // Displsay
  res.setHeader('Content-Disposition', 'attachment; filename='+filename);
  res.send(pdfBuffer);
}

工作:

import {PDFDocument, rgb, StandardFonts  } from 'pdf-lib';

export async function modifyPDF(firstname, lastname, id) {


    const order_id = id; 
    const fullname = firstname + " " + lastname;

    const existingPdfBytes = await fetch("https://pdf-lib.js.org/assets/us_constitution.pdf").then((res) => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);


    const watermark = fullname + " (OrderID: " + id + ")";

    
     // Set Document Metadata
     pdfDoc.setSubject(watermark);

     // Get pages
     const pages = pdfDoc.getPages();
 
     // Iterate every page, skip first
     //pages.slice(1).forEach(page => {
     pages.forEach(page => {
   
       
       // Get the width and height of the page
       const {
         width,
         height
       } = page.getSize()
 
       // Watermark the page
       page.drawText(watermark, {
             x: 70,
             y: 8,
             size: 10,
             font: helveticaFont,
             color: rgb(0.95, 0.1, 0.1),
       })
     })
  
    const pdfBytes = await pdfDoc.save();
    return Buffer.from(pdfBytes.buffer, 'binary');
 

}


export default async function handler(req, res) {
  const filename = "test.pdf";
  const {id, firstname, lastname} = req.query;
  const pdfBuffer = await modifyPDF(firstname, lastname, id);
  res.status(200); 
  res.setHeader('Content-Type', 'application/pdf');  // Displsay
  res.setHeader('Content-Disposition', 'attachment; filename='+filename);
  res.send(pdfBuffer);
}

1 回复 | 直到 3 年前

Nelloverflow 3 年前

换衣服 modifyPDF 返回缓冲区

[...]
    const pdfBytes = await pdfDoc.save();
    return Buffer.from(pdfBytes.buffer, 'binary');
[...]

export default async function handler(req, res) {

    const {id, firstname, lastname} = req.query;
    const pdfBuffer = await modifyPDF(firstname, lastname, id);
    res.status(200); 
    
    res.setHeader('Content-Type', 'application/pdf'); 
    res.setHeader('Content-Disposition', 'attachment; filename='+filename); 
    // Edited as the linked example reports: 
    // res.type('pdf'); // and might not work
    res.send(pdfBuffer);
}

未经测试,但你应该了解要点。

Here's the full example from the library itself