实时PDF预览器：输入同步显示但清除无法同步的问题解决需求

问题根源 #

jsPDF的文档实例一旦完成内容绘制，无法直接删除或覆盖已绘制的元素。你的代码错误地尝试在原有文档上叠加空文本，且使用了不存在的doc.removeOption方法，导致清除操作无法同步更新PDF内容。

解决方案核心思路 #

每次内容更新（输入、清除）都重新生成完整的PDF文档，而非在原文档上修改。通过抽取独立的PDF生成函数，确保每次生成的PDF都是全新的，彻底避免旧内容残留。

修改后的完整代码 #

HTML（无改动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
</head>
<body>
    <div class="flex">
        <div class="form-control">
            <form>
                <label for="name">Name</label>
                <input type="text" id="name" >
                <label for="roll">Roll No</label>
                <input type="text" id="roll">
            </form>
            <button id="btn">Clear</button>
        </div>
        <!-- PDF Previewer -->
        <iframe src="" id="pdf"></iframe>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（无改动）

form {
    display: flex;
    flex-direction: column;
    margin: 70px;
}

iframe {
    display: block;
    width: 100%;
    height: 50vh;
}

JavaScript（核心修改）

let pdfPreview = document.getElementById("pdf");
let inputName = document.getElementById("name");
let inputRoll = document.getElementById("roll");
let clearBtn = document.getElementById("btn");

// 渲染PDF到iframe的工具函数
function renderPDF(data) {
  const pdfBlob = new Blob([data], { type: "application/pdf" });
  const objectURL = URL.createObjectURL(pdfBlob);
  pdfPreview.setAttribute("src", objectURL);
}

// 核心：根据当前输入生成完整PDF
function generatePDF(name = "", roll = "") {
  // 每次都创建新的jsPDF实例
  const doc = new jsPDF({ orientation: "landscape" });
  doc.setFontSize(15);
  
  // 绘制基础固定文本
  doc.text(20, 50, "Name__________________");
  doc.text(20, 65, "Roll No_____________");
  
  // 绘制用户输入内容（为空则不显示）
  if (name) doc.text(39, 50, name);
  if (roll) doc.text(39, 65, roll);
  
  // 渲染生成的PDF
  renderPDF(doc.output());
}

// 初始化渲染默认PDF
generatePDF();

// 实时响应输入变化
inputName.addEventListener("input", () => {
  generatePDF(inputName.value, inputRoll.value);
});

inputRoll.addEventListener("input", () => {
  generatePDF(inputName.value, inputRoll.value);
});

// 清除按钮逻辑：清空输入框并重新生成PDF
clearBtn.addEventListener("click", () => {
  inputName.value = "";
  inputRoll.value = "";
  generatePDF();
});

关键改动说明 #

1. 新增generatePDF函数：每次调用都会创建全新的jsPDF实例，重新绘制所有内容（固定文本+用户输入），从根源避免旧内容残留。
2. 替换change事件为input事件：实时响应用户输入，无需等待输入框失去焦点，实现真正的"实时预览"。
3. 修复清除逻辑：清空输入框后直接调用generatePDF生成不含用户输入的全新PDF，彻底清除PDF上的内容。

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