使用jsPDF实现PDF导出下载功能失效的问题咨询

• 导入语法与当前引入方式冲突
  你已经通过<script>标签引入了jsPDF的UMD版本，但在函数内部额外使用了ES模块专属的import { jsPDF } from "jspdf"语法。这种语法只能在type="module"的script标签环境下运行，普通script中浏览器会直接抛出语法错误，导致createPDF函数完全无法执行。
• DOM选择器匹配失败
  用于提取内容的<p>标签没有添加id="p"属性，document.getElementById("p")会返回null，后续访问null.innerHTML会触发空值报错。
• UMD版本实例化路径错误
  UMD构建的jsPDF不会直接把jsPDF构造函数挂载到全局window下，而是嵌套在window.jspdf对象中，直接调用new jsPDF()会报未定义错误。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
</head>
<body>
    <p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, provident perferendis. Adipisci beatae libero nihil eaque a nobis nulla pariatur itaque sunt, magni unde vitae corporis deleniti officia molestias nemo!</p>
    <button onclick="createPDF()">Create PDF</button>
</body>
<script> 
    function createPDF(){
        // 从UMD全局对象中获取jsPDF构造函数
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        // 提取纯文本内容，避免HTML标签被直接写入PDF
        const content = document.getElementById("p").textContent;
        // 长文本自动换行，避免超出PDF页面宽度
        const wrappedContent = doc.splitTextToSize(content, 180);
        doc.text(wrappedContent, 10, 10);
        doc.save("a4.pdf");
    }
</script>
</html>

• 若需要导出带样式的富文本/带复杂布局的HTML元素，无法仅靠原生doc.text()实现，需要额外引入html2canvas适配插件配合使用。
• 两种引入方式二选一即可：要么用UMD CDN引入后通过全局对象实例化，要么通过npm安装依赖后在ES模块环境中使用import语法导入，不能混合使用两种导入逻辑。

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