使用jsPDF转换Canvas为PDF时遇多种导入及构造错误求助

一、npm 安装场景的正确处理 #

针对问题1、2：umd包导入导致的构造器/导出错误 #

不要直接导入node_modules下的umd格式文件，npm安装后直接通过包名导入ES模块版本即可，工具链（如Vite、Webpack）会自动处理正确入口：

import { jsPDF } from 'jspdf';

针对问题3：模块解析路径错误 #

如果是无构建工具的纯静态页面，不能直接用import 'jspdf'，需指定相对路径指向ES模块版本文件：

import { jsPDF } from '../node_modules/jspdf/dist/jspdf.es.min.js';

二、CDN 引入场景的正确处理 #

针对问题4：全局变量未定义 #

umd格式的CDN脚本会将内容挂载到window.jspdf对象下，而非直接暴露jsPDF全局变量，正确使用方式：

1. 普通脚本模式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
  const doc = new window.jspdf.jsPDF();
  doc.text("测试内容", 10, 10);
  doc.save("demo.pdf");
</script>

2. ES模块模式：

<script type="module">
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  // 后续PDF操作
</script>

三、Canvas转PDF基础示例 #

确认导入正确后，实现Canvas转PDF的基础代码：

const canvas = document.getElementById('your-canvas-id');
const doc = new jsPDF('p', 'mm', 'a4');

// 获取Canvas图片数据
const imgData = canvas.toDataURL('image/png');
// 计算适配A4的尺寸（保持比例）
const imgWidth = 210;
const imgHeight = (canvas.height * imgWidth) / canvas.width;

doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
doc.save('canvas-export.pdf');

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