NodeJS服务端实现PDF数字签名 显示签名图片及校验状态

现有流程适配方案（基于你已使用的node-signpdf） #

你当前使用的node-signpdf本身支持可见签名，之前生成隐形签名是因为没有配置签名外观和关联可见签名字段，无需更换现有签名逻辑，仅需新增签名字段预处理步骤即可。

• 用pdf-lib库在你转好的PDF中提前预留可见签名字段，配置签名显示位置、尺寸、自定义外观
• 调用node-signpdf执行签名时，指定关联你提前创建的签名字段，即可生成带可见标识的签名文件

校验状态直观展示实现逻辑 #

PDF原生规范支持签名校验状态动态切换，无需后端额外渲染校验结果：

• 定义签名字段外观时分为两个独立层：校验通过层和校验失败层，PDF阅读器打开文档时会自动根据签名有效性切换显示对应层
• 校验通过层可放置你的签名图片、「签名有效」标识；校验失败层可放置红色失效标识、「签名已被篡改」提示，所有状态切换由阅读器原生完成，无需额外开发

完整实现步骤 #

1. 按你现有逻辑将DOCX转换为PDF，输出PDF Buffer备用
2. 用pdf-lib加载PDF Buffer，添加可见签名字段，指定字段所在页码、坐标、宽高，同时配置双状态外观层，可嵌入你的自定义签名图片
3. 导出已添加签名字段的PDF Buffer，传入你现有node-signpdf签名逻辑，签名时指定关联你刚创建的签名字段ID，不要使用默认的隐形签名模式
4. 输出最终签名PDF，用户打开后阅读器会自动校验签名有效性，切换显示对应状态

关键代码示例：

// pdf-lib添加可见签名字段示例
const { PDFDocument } = require('pdf-lib');
const fs = require('fs');
const signer = require('node-signpdf').default;

const addSignatureField = async (pdfBuffer) => {
  const pdfDoc = await PDFDocument.load(pdfBuffer);
  const pages = pdfDoc.getPages();
  const lastPage = pages[pages.length - 1];
  // 创建签名字段，指定显示在最后一页右下角
  const signatureField = pdfDoc.getForm().createSignatureField('doc_sign_1');
  signatureField.addToPage(lastPage, {
    x: 420,
    y: 60,
    width: 140,
    height: 70,
  });
  return await pdfDoc.save();
};

// 签名逻辑（兼容你现有node-signpdf调用）
const p12Cert = fs.readFileSync('你的签名证书.p12');
const docxConvertedPdf = fs.readFileSync('DOCX转好的PDF文件.pdf');
const pdfWithField = await addSignatureField(docxConvertedPdf);
const signedPdf = signer.sign(pdfWithField, p12Cert, {
  passphrase: '你的证书密码',
  signatureFieldName: 'doc_sign_1' // 关联你创建的签名字段
});
fs.writeFileSync('已签名可见.pdf', signedPdf);

注意事项 #

• 签名所用数字证书需为CA机构签发的可信证书，否则阅读器会提示「未验证身份」，不会直接标记为有效签名
• 签名字段的位置不要和PDF原有内容重叠，避免显示不全
• 如需自定义签名外观，可在pdf-lib创建字段时将PNG格式的签名图嵌入到字段外观流中即可

内容的提问来源于stack exchange，提问作者Suyog Patil