如何通过Ajax、JavaScript和PHP将签名板签名转为PDF文件？

你可以借助jsPDF这个轻量级的JavaScript库来实现把签名板的Canvas内容转换成PDF并保存，下面是具体的步骤和代码示例：

步骤1：引入jsPDF库 #

首先在你的HTML文件中引入jsPDF的CDN链接（也可以下载本地文件引入）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

步骤2：修改保存按钮的点击事件逻辑 #

假设你的签名板对应的Canvas元素id是signatureCanvas，保存按钮的id是savePdfBtn，替换原来保存PNG的代码为以下逻辑：

// 获取签名板的Canvas元素
const signatureCanvas = document.getElementById('signatureCanvas');
// 获取保存PDF的按钮
const savePdfBtn = document.getElementById('savePdfBtn');

savePdfBtn.addEventListener('click', function() {
  // 初始化jsPDF实例，设置页面为纵向A4尺寸
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF('portrait', 'mm', 'a4');
  
  // 获取Canvas的原始宽高
  const canvasWidth = signatureCanvas.width;
  const canvasHeight = signatureCanvas.height;
  
  // 计算PDF内的适配尺寸：以A4页面宽度为基准等比例缩放
  const pdfPageWidth = pdf.internal.pageSize.getWidth();
  const scaleFactor = pdfPageWidth / canvasWidth;
  const scaledCanvasHeight = canvasHeight * scaleFactor;
  
  // 将Canvas签名内容添加到PDF中，预留左右边距
  pdf.addImage(signatureCanvas, 'PNG', 10, 10, pdfPageWidth - 20, scaledCanvasHeight);
  
  // 触发PDF文件保存
  pdf.save('我的签名.pdf');
});

关键细节说明 #

• 尺寸适配：代码会自动根据A4页面宽度等比例缩放签名内容，避免签名超出PDF页面范围；如果需要固定尺寸，可直接修改addImage的宽度和高度参数。
• Canvas兼容性：确认你的签名板是基于Canvas绘制的——绝大多数签名板插件都会将签名内容渲染在Canvas元素上，这是实现转换的前提。
• 自定义文件名：你可以修改pdf.save()中的字符串，设置成你需要的PDF文件名。

扩展：添加额外内容到PDF #

如果之后需要在PDF中补充签名者信息、日期等内容，可以使用jsPDF的文本API：

// 在签名下方添加文本
pdf.text('签名者：张三', 10, scaledCanvasHeight + 20);
pdf.text('签署日期：2024-05-20', 10, scaledCanvasHeight + 30);

这样就能轻松把签名板的保存功能从PNG切换为PDF啦！

内容的提问来源于stack exchange，提问作者Jack Shukla