使用jsPDF生成身份证PDF报错：Uncaught ReferenceError: jsPDF is not defined

开发展示用户身份证信息的网页时，添加PDF下载功能遇到控制台报错：

Button clicked!
id.php?userPhone=123:93 Uncaught ReferenceError: jsPDF is not defined
at HTMLButtonElement. (id.php?userPhone=123:93:23)

问题原因 #

你引入的是umd模块化版本的jsPDF，它不会直接在全局作用域暴露jsPDF构造函数，而是通过jspdf全局对象导出。另外doc.html方法依赖html2canvas库，原代码未引入该依赖，后续生成PDF也会失败。

修复方案 #

1. 调整jsPDF的调用方式，使用jspdf.jsPDF构造函数
2. 添加html2canvas的引用，确保doc.html功能正常
3. 可选：配置PDF页面参数，匹配身份证的竖版尺寸

修复后完整代码 #

HTML部分

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 先引入html2canvas依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- 再引入jsPDF umd版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

<div id="main" class="container-fluid">
  <div class="id-card-container">
    <div class="id-card-header">
      <img src="logo.png" alt="Company Logo">
    </div>
    <div class="id-card-body">
      <h5>ID Card Information</h5>
      <p><strong>ID Card Number: </strong>ID 1</p>
      <p><strong>Date of Issue: </strong>Date 1</p>
      <p><strong>Full Name: </strong>Firstname Lastname</p>
      <p><strong>Date of Birth: </strong>DOB</p>
      <p><strong>Craft Name: </strong>Craaftname</p>
      <p><strong>Aadhar No: </strong>Aadharnum</p>
      <p><strong>Contact No: </strong>Phone</p>
      <p><strong>Address: </strong>User address</p>
    </div>
    <div class="id-card-footer">
      <p>Valid for 5 years from the date of issue</p>
    </div>
  </div>
  <div>
    <button id="downloadBtn" class="btn btn-primary btn-download">Download ID Card as PDF</button>
  </div>
</div>

<!-- 自定义脚本放在页面底部 -->
<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
  console.log("Button clicked!");
  // 使用umd版本的正确构造函数，同时配置身份证尺寸
  var doc = new jspdf.jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: [85.6, 54] // 身份证实际尺寸（宽x高，单位mm）
  });
  doc.html(document.querySelector('.id-card-container'), {
    callback: function(pdf) {
      pdf.save('id_card.pdf');
      console.log("PDF saved!");
    },
    margin: 5 // 添加边距避免内容被裁切
  });
});
</script>

CSS部分（无需修改）

.id-card-container {
  width: 350px;
  padding: 20px;
  margin: 50px auto;
  background: #f7f7f7;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.id-card-header,
.id-card-footer {
  background: #343a40;
  color: white;
  padding: 10px;
  border-radius: 10px;
}

.id-card-header img {
  max-width: 50px;
  margin-bottom: 10px;
}

.id-card-body {
  text-align: left;
  padding: 20px;
}

.id-card-body h5 {
  margin-bottom: 10px;
  font-weight: bold;
}

.id-card-body p {
  margin-bottom: 5px;
}

.btn-download {
  margin-top: 20px;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

关键修改说明 #

• 构造函数修正：将new jsPDF()改为new jspdf.jsPDF()，匹配umd模块的导出结构
• 依赖补充：引入html2canvas，确保HTML转PDF的核心功能正常运行
• 页面适配：设置PDF尺寸为身份证实际大小，添加边距避免内容溢出裁切

内容的提问来源于stack exchange，提问作者Unusual Catcher