【教案生成平台】实战教程四：开发所见即所得的在线试卷编辑器

AI 驱动的智能备课助手。一键生成标准教案、配套试题及PPT课件大纲。支持手写体试卷排版、自动出题、以及 Word/PDF/PPTX 多格式导出，让教师备课更高效、更轻松。

1. 场景分析

试卷编辑的核心需求是：灵活的题型组合 和 精确的打印排版。
核心技术点：

• 动态组件 (Component :is)
• 拖拽排序 (可选)
• HTML 转 PDF (html2canvas + jspdf)

2. 试卷数据模型

试卷由“大题”（Sections）和“小题”（Questions）组成。

const examPaper = ref({
   
  title: "2024年期末考试试卷",
  sections: [
    {
   
      name: "一、单选题",
      scorePerQuestion: 2,
      questions: [
        {
   
          type: "single_choice",
          stem: "Vue的作者是？",
          options: ["尤雨溪", "Facebook", "Google"],
        },
      ],
    },
    // ... 其他题型
  ],
});

3. 组件化题目渲染 (QuestionItem.vue)

为了支持扩展更多题型，我们将题目渲染封装为组件。

<template>
  <div class="question-item">
    <div class="q-stem">
      <span class="q-no">{
  { index + 1 }}.</span>
      <input v-model="question.stem" placeholder="输入题干..." />
    </div>

    <!-- 单选题渲染逻辑 -->
    <div v-if="type === 'single_choice'" class="options-area">
       <div v-for="(opt, i) in question.options" :key="i">
          <input type="radio" disabled />
          <input v-model="question.options[i]" />
       </div>
    </div>

    <!-- 简答题渲染逻辑 -->
    <div v-else-if="type === 'essay'" class="essay-area">
       <div class="blank-lines">______________________</div>
    </div>
  </div>
</template>

4. 试卷排版与预览

编辑器右侧应实时显示“A4纸”效果。
使用 CSS 模拟 A4 纸尺寸：

.preview-page {
   
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

5. 导出为高清 PDF

将网页变为 PDF 的难点在于分页截断。为了简化，我们先实现生成长图 PDF。

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const exportPDF = async () => {
   
  const element = document.getElementById("exam-preview"); // 获取预览 DOM

  // 1. 转为 Canvas
  const canvas = await html2canvas(element, {
    scale: 2 }); // 2倍缩放保证清晰度

  // 2. 转为图片数据
  const imgData = canvas.toDataURL("image/png");

  // 3. 放入 PDF
  const pdf = new jsPDF("p", "mm", "a4");
  const imgWidth = 210;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
  pdf.save("exam.pdf");
};

在线体验

演示链接： https://www.ytecn.com/teacher/
git链接： https://github.com/tcshowhand/teacher/

总结

本模块通过 Vue 的数据驱动特性，让复杂的试卷编辑变得像搭积木一样简单。所见即所得的模式消除了传统 Word 排版错乱的烦恼。