如何正确使用jsPDF 2.5.1库？本地生成含图片PDF遇多类报错

第一步：搭建基础Node.js项目（积累Node.js经验） #

从初始化标准npm项目开始，这是管理JS依赖的通用方式：

1. 新建空文件夹，打开终端进入该文件夹，执行：

   npm init -y
   

   自动生成package.json文件，记录项目依赖与配置。
2. 安装所需依赖：

   npm install jspdf html2canvas --save
   

   • jspdf负责生成PDF文件
   • html2canvas负责将目标
     转换为Canvas（处理图片渲染的核心工具）

第二步：正确的文件结构与引入方式 #

推荐项目结构：

your-project/
├── node_modules/       # npm安装的依赖（自动生成）
├── index.html          # 页面文件
├── script.js           # 核心逻辑代码
└── package.json        # 项目配置文件

HTML文件配置 #

在index.html中写入页面结构与脚本引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>转PDF测试</title>
</head>
<body>
  <!-- 要转PDF的目标div，包含图片 -->
  <div id="pdfContent" style="padding: 20px; width: 600px; margin: 0 auto;">
    <h2>我的测试文档</h2>
    <img src="./test-image.jpg" alt="测试图片" style="width: 100%; margin: 10px 0;">
    <p>这是一段配合图片的测试文本，用来验证PDF生成效果。</p>
  </div>

  <!-- 触发生成PDF的按钮 -->
  <button id="generateBtn" style="display: block; margin: 20px auto;">生成PDF</button>

  <!-- 用ES模块方式引入脚本，必须加type="module" -->
  <script type="module" src="./script.js"></script>
</body>
</html>

核心逻辑代码（script.js） #

在script.js中正确导入依赖并实现转PDF逻辑：

// 从npm依赖中导入jsPDF和html2canvas
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';

// 给按钮绑定点击事件
document.getElementById('generateBtn').addEventListener('click', async () => {
  // 获取目标div元素
  const targetDiv = document.getElementById('pdfContent');

  // 把div转换成Canvas，处理图片渲染
  const canvas = await html2canvas(targetDiv, {
    scale: 2, // 提高分辨率，避免PDF内容模糊
    useCORS: true // 如果图片是跨域资源（比如CDN图片），必须开启这个选项
  });

  // 创建jsPDF实例：纵向（p）、毫米单位（mm）、A4纸尺寸
  const pdf = new jsPDF('p', 'mm', 'a4');

  // 计算Canvas与PDF页面的适配比例
  const canvasWidth = canvas.width;
  const canvasHeight = canvas.height;
  const pdfPageWidth = pdf.internal.pageSize.getWidth();
  const pdfPageHeight = pdf.internal.pageSize.getHeight();
  const scaleRatio = Math.min(pdfPageWidth / canvasWidth, pdfPageHeight / canvasHeight);

  // 计算缩放后的Canvas尺寸
  const scaledWidth = canvasWidth * scaleRatio;
  const scaledHeight = canvasHeight * scaleRatio;

  // 将Canvas内容添加到PDF中
  pdf.addImage(
    canvas.toDataURL('image/png'), // Canvas转成PNG格式的base64
    'PNG', // 图片格式
    0, 0, // 图片在PDF中的起始坐标（x,y）
    scaledWidth, scaledHeight // 图片在PDF中的尺寸
  );

  // 保存生成的PDF文件
  pdf.save('我的文档.pdf');
});

第三步：运行项目（解决本地跨域问题） #

直接双击打开index.html会触发浏览器跨域限制，需用本地服务器运行：
在终端执行：

npx serve

终端会给出访问地址（如http://localhost:3000），在浏览器打开该地址，点击按钮即可正常生成PDF。

解决你遇到的常见错误 #

1. @babel/runtime模块解析错误：你之前直接克隆仓库用dist文件，未安装仓库依赖导致缺少@babel相关包。用npm install安装完整依赖后，通过ES模块导入即可解决。
2. UMD文件导入报错does not provide an export named 'jsPDF'：jspdf.umd.js是全局变量模式，不能用import { jsPDF }导入。若要用UMD，需在HTML中用<script src="./node_modules/jspdf/dist/jspdf.umd.js"></script>引入，直接使用全局的jsPDF类。
3. fflate的index.d.ts MIME类型错误：.d.ts是TypeScript类型定义文件，仅用于开发提示，绝对不要引入到浏览器运行。
4. module is not defined/exports is not defined：这是在浏览器中使用了Node.js的CommonJS语法（require/module.exports）导致的，改用ES模块（加type="module"）或UMD格式文件即可解决。
5. CDN导入无效：若用CDN需选ES模块版本链接，示例：

   import { jsPDF } from 'https://cdn.jsdelivr.net/npm/jspdf@2.5.1/+esm';
   import html2canvas from 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/+esm';
   

   确保script标签加了type="module"。

积累GitHub和Node.js经验的小技巧 #

1. 用Git管理项目：执行git init初始化仓库，创建.gitignore文件（写入node_modules/），将代码提交到GitHub，练习版本控制。
2. 查看依赖文档：安装依赖后，打开node_modules/jspdf/README.md查看官方示例，比零散教程更准确。
3. 熟悉npm命令：比如npm update jspdf升级依赖，npm uninstall jspdf删除依赖，npm list查看已安装依赖版本。

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