学校考试A3试卷模板：HTML+CSS实现可对折拼版与批量出卷

简介：学校考试A3试卷模板是一份面向中小学教师及教务人员的标准化命题排版文档，用于快速生成期中、期末或模拟检测卷。模板采用297mm×420mm的A3幅面，比A4大一倍，可容纳更多题目与答题区域，顶部预留学校、年级、班级、姓名、学号等基本信息填写栏，并标注90分钟考试时间与100分满分，便于统一规范考试格式。资源包内含1个doc文件，压缩后约38KB，可直接用Word打开编辑，替换校名、年级与题目内容即可套用。模板内置分页提示（如“弟1页/（共4页）”）、阅卷人得分栏以及“密封线内不要答题”的密封线设计，能有效防止漏题、丢页与答案外露，同时方便教师按题号分配分值、控制难易梯度。目前已有818人学习下载，适合需要快速出卷、规范卷面布局的一线教师参考使用。

1. 学校考试A3试卷模板：从一张纸到一套可复用的排版系统

每次大考前一周，打印室门口总有人抱着一摞 A4 纸来回翻面拼版，胶带贴得歪歪扭扭，最后裁出来的密封线对不上页码。学校考试 A3 试卷模板要解决的正是这件事：把两页 A4 内容按对折顺序拼到一张 A3 上，正反面印完对折即成一册，学生翻开就是完整卷面。它适合三类人：需要批量出卷的教务老师、要自己排版小测的一线教师、以及给学校做阅卷系统的开发者。核心不在“画一张卷头”，而在于把版心、密封线、页码、装订位这些约束固化成模板，让换题目内容时排版不塌。下面按“先立规矩、再动手、最后避坑”的顺序拆开讲。

2. 先定版心与拼版规则：A3 对折卷的几何账

2.1 为什么是 A3 对折而不是直接 A3 单面

A3 尺寸是 297mm × 420mm，对折后得到 297mm × 210mm，正好是一张 A4 横放。考试卷常见做法是把 A4 竖版内容旋转 90° 排进对折后的半页里，这样学生翻卷时是上下翻而不是左右翻，装订线落在中间折痕处。如果直接按 A3 单面排，题目横向铺满 420mm，阅读视线要来回扫，而且对折后页码顺序会乱。常见做法是：一张 A3 正反面共 4 个 A4 版面，按“封面、内页左、内页右、封底”的折页顺序拼。

这里有个容易翻车的点：很多人以为对折后页码是 1-2-3-4 顺序排，实际折页拼版是“外页配外页、内页配内页”。一张纸正面放第 1 页和第 4 页，反面放第 2 页和第 3 页，对折后才是 1、2、3、4。这个规则不立住，后面所有排版都是白做。

2.2 版心、页边距与密封线的具体数值

版心决定题目能占多大地方。A4 竖版常用版心宽度 160mm～170mm，上下边距各 20mm～25mm。密封线通常放在装订侧，宽度 25mm～30mm，线内写“姓名、班级、考号”，线外是题目区。如果密封线放在对折后的外侧，学生写完对折就被盖住，这是对的；如果放错到折痕侧，一翻开就露出来，密封就失效了。

提示：不同打印机有 3mm～5mm 不可打印边距，版心设计时先把这部分扣掉，否则密封线会被裁掉一半。

2.3 用 CSS 的 @page 把 A3 横版规则写死

如果模板走 HTML 转 PDF 路线，第一步是把页面尺寸和分页规则固定下来。下面这段 CSS 定义 A3 横向、零边距，再用一个容器模拟对折后的两个半页。

/* A3 横向，对折后左右各一个 A4 竖版区域 */ @page { size: A3 landscape; /* 420mm x 297mm，注意这里是横向 */ margin: 0; /* 边距交给内层容器控制 */ } .paper { width: 420mm; height: 297mm; display: flex; /* 左右两个半页并排 */ box-sizing: border-box; } .half { width: 210mm; /* 对折后的单页宽度 */ height: 297mm; padding: 20mm 25mm; /* 上下 20mm，左右 25mm */ box-sizing: border-box; position: relative; } /* 密封线放在左半页的左侧，对折后位于外侧 */ .seal-line { position: absolute; left: 0; top: 40mm; width: 25mm; height: 200mm; border-right: 1px dashed #333; writing-mode: vertical-rl; /* 文字竖排 */ text-align: center; font-size: 12pt; }

这段代码的逻辑是：@page控制物理纸张，.paper控制一张 A3 的版面，.half是对折后的单页。box-sizing: border-box保证 padding 不会把 210mm 撑爆。密封线用绝对定位贴左边缘，writing-mode: vertical-rl让“姓名班级考号”竖着排，符合传统卷面习惯。参数上，padding的左右值要和密封线宽度协调，如果密封线占 25mm，左半页的左边距就不能再给 25mm，否则题目区被挤到只剩 160mm。

3. 用 HTML + 打印样式生成可对折的 A3 试卷

3.1 卷头、题目区、页码的 DOM 结构

模板要能复用，结构就得拆清楚：卷头（学校、科目、时间）、题目区（分大题）、页码区。下面是一个最小可跑的结构，两个半页分别放第 1、4 页和第 2、3 页。

<div class="paper"> <!-- 正面：第 1 页（封面）和第 4 页（封底） --> <section class="half"> <div class="seal-line">姓名 班级 考号</div> <header class="exam-head"> <h1>某科目阶段性检测</h1> <p>时间：90 分钟 满分：100 分</p> </header> <main class="questions"> <h2>一、选择题（每题 3 分，共 30 分）</h2> <!-- 题目内容由数据填充 --> </main> <footer class="page-num">第 1 页</footer> </section> <section class="half"> <main class="questions"> <h2>四、解答题（共 40 分）</h2> </main> <footer class="page-num">第 4 页</footer> </section> </div>

结构说明：.seal-line只出现在封面半页，因为对折后它在外侧；封底半页不需要密封线。页码用footer固定在版心外侧下角，对折后学生翻到哪页都能看到。题目区用h2分大题，方便后续用脚本按题型插入。

3.2 打印时隐藏屏幕辅助元素并强制分页

屏幕上编辑时可能需要辅助线、按钮，打印时必须隐藏。下面这段打印样式把辅助元素干掉，并确保一张 A3 只放一组正反面。

@media print { .screen-only { display: none !important; } /* 隐藏编辑辅助 */ .paper { page-break-after: always; /* 每张 A3 后强制分页 */ box-shadow: none; /* 去掉屏幕预览阴影 */ } .half { border: none; /* 打印时不要半页边框 */ } .page-num { position: absolute; bottom: 10mm; right: 15mm; font-size: 10pt; } }

page-break-after: always是关键，它保证浏览器打印时不会把两张 A3 挤到同一张纸上。box-shadow和border在打印时是浪费墨的，去掉。页码用绝对定位贴右下角，注意右半页的页码要贴右边缘，左半页的页码要贴左边缘，否则对折后页码会跑到折痕附近。

3.3 用脚本按折页顺序自动分配页码

手工排页码容易错，写个函数按“外页配外页”规则分配。输入总页数，输出每张 A3 正反面放哪几页。

/** * 按对折拼版规则计算每张 A3 的页码分配 * @param {number} totalPages 总页数，必须是 4 的倍数 * @returns {Array} 每项为 { front: [左, 右], back: [左, 右] } */ function buildImposition(totalPages) { if (totalPages % 4 !== 0) { throw new Error('总页数必须是 4 的倍数，不足补空白页'); } const sheets = []; const half = totalPages / 2; for (let i = 0; i < totalPages / 4; i++) { // 正面：第 i+1 页 配 倒数第 i+1 页 // 反面：第 half-i 页 配 第 half+i+1 页 sheets.push({ front: [i + 1, totalPages - i], back: [half - i, half + i + 1] }); } return sheets; } // 8 页示例：输出每张纸正反面页码 console.log(buildImposition(8)); // [{front:[1,8], back:[4,5]}, {front:[2,7], back:[3,6]}]

这个函数的逻辑是：总页数先除以 2 得到“半册页数”，每张纸正面放最前和最后未分配的页，反面放中间相邻的两页。参数totalPages必须是 4 的倍数，因为一张 A3 正反面共 4 个版面。如果实际内容只有 6 页，就补 2 页空白凑成 8 页，否则拼版会错位。输出结果可以直接喂给模板渲染函数，按front和back分别生成两张 A3。

4. 批量出卷与数据驱动：把题目内容灌进模板

4.1 用 JSON 描述一套试卷

模板固定后，换科目、换题目只需要换数据。下面是一份试卷的 JSON 描述，包含卷头信息和题目数组。

{ "subject": "某科目", "duration": 90, "totalScore": 100, "sections": [ { "title": "一、选择题", "scorePerItem": 3, "items": [ { "stem": "题干内容占位", "options": ["A. 选项一", "B. 选项二", "C. 选项三", "D. 选项四"] } ] }, { "title": "二、解答题", "items": [ { "stem": "解答题题干占位", "answerLines": 6 } ] } ] }

sections对应大题，items对应小题。answerLines控制解答题留几行答题空位，渲染时按行高换算成高度。这样教务老师只需要填 JSON，不用碰 HTML。

4.2 渲染函数：从 JSON 到分页 HTML

下面这个函数把 JSON 转成题目区 HTML，并按内容高度粗略分页。实际项目中分页可以更精细，这里给最小可用版本。

/** * 将试卷数据渲染为题目区 HTML * @param {Object} exam 试卷 JSON * @returns {string} HTML 字符串 */ function renderExam(exam) { let html = ''; exam.sections.forEach(section => { html += `<h2>${section.title}（共 ${section.items.length} 题）</h2>`; section.items.forEach((item, idx) => { html += `<div class="question">`; html += `<p>${idx + 1}. ${item.stem}</p>`; if (item.options) { html += `<ul class="options">`; item.options.forEach(opt => { html += `<li>${opt}</li>`; }); html += `</ul>`; } if (item.answerLines) { // 每个答题行 8mm 高，用空 div 占位 html += `<div class="answer-area" style="height:${item.answerLines * 8}mm"></div>`; } html += `</div>`; }); }); return html; }

逻辑说明：遍历sections生成大题标题，再遍历items生成小题。选择题用ul排选项，解答题用固定高度的div留答题区。参数answerLines * 8mm是经验值，一行手写大约 8mm，如果学生字大可以调到 10mm。渲染出的 HTML 再塞进第 3 章的.questions容器即可。

4.3 批量生成多套卷并导出 PDF

批量出卷时，把多份 JSON 循环渲染，每份生成一个 HTML 文件，再用无头浏览器打印成 PDF。下面用 Node.js 示意。

const fs = require('fs'); const { execSync } = require('child_process'); const exams = [/* 多份试卷 JSON */]; exams.forEach((exam, i) => { const body = renderExam(exam); const html = buildFullPage(exam, body); // 拼上卷头和样式 const file = `exam_${i + 1}.html`; fs.writeFileSync(file, html); // 调用无头浏览器打印，具体命令按本机环境调整 execSync(`chrome --headless --print-to-pdf=exam_${i + 1}.pdf ${file}`); });

这段代码的关键是buildFullPage把卷头、题目区、样式拼成完整 HTML，然后交给无头浏览器打印。参数上，--print-to-pdf会读取 CSS 里的@page规则，所以第 2 章的 A3 横向设置必须写对。批量跑之前先用一份数据验证 PDF 的对折顺序，确认无误再放开循环。

5. 避坑与排查：A3 试卷模板最常见的 5 个翻车点

5.1 打印出来页码顺序乱了

现象：对折后翻开，页码是 1、4、2、3 而不是 1、2、3、4。原因：拼版时把正反面页码配错了，或者buildImposition的front和back顺序颠倒。解决：先用 8 页空白纸跑一遍，在每页角落写大号页码，打印对折后逐页核对。确认规则是“正面放 1 和 8，反面放 4 和 5”，再套用到实际内容。

5.2 密封线被裁掉或对折后露出来

现象：密封线只剩一半，或者学生一翻开就看到姓名。原因：密封线位置放到了折痕侧，或者没算打印机不可打印边距。解决：密封线必须放在对折后的外侧，左半页贴左、右半页贴右。设计时把不可打印边距按 5mm 预留，密封线宽度从 25mm 起算，不要贴到 0mm。

5.3 题目区被挤到只剩一半宽度

现象：版心明显偏窄，题目换行频繁。原因：.half的padding左右值给太大，或者密封线用position: absolute后没有给题目区留出对应边距。解决：左半页的左边距 = 密封线宽度 + 装订余量，右半页的右边距同理。用box-sizing: border-box后，padding 是包含在 210mm 内的，算清楚再写。

5.4 打印时多出一张空白 A3

现象：PDF 最后多一页空白。原因：.paper的page-break-after: always在最后一张纸后面也加了分页。解决：用:last-child去掉最后一个.paper的分页，或者渲染时判断是否是最后一张。CSS 写法：.paper:last-child { page-break-after: auto; }。

5.5 不同打印机对折后对不齐

现象：同一份 PDF，换一台打印机对折后页码偏移 2mm～3mm。原因：不同打印机的进纸偏移和缩放比例不同。解决：打印设置里关闭“适应页面”或“缩放”，选“实际大小”。如果仍有偏移，在模板里把版心整体内缩 3mm 作为安全区。这个玄学问题没有万能解，只能按目标打印机微调。

6. 进阶：用 CSS 变量做多科目模板与快速换肤

模板做多了会发现，不同科目、不同年级的卷头格式和密封线要求不一样。与其复制多份 CSS，不如把可变部分抽成 CSS 变量，一套模板覆盖多种场景。

:root { --seal-width: 25mm; /* 密封线宽度 */ --page-padding-v: 20mm; /* 上下边距 */ --page-padding-h: 25mm; /* 左右边距 */ --head-font: 16pt; /* 卷头字号 */ --answer-line: 8mm; /* 答题行高 */ } .half { padding: var(--page-padding-v) var(--page-padding-h); } .seal-line { width: var(--seal-width); } .exam-head h1 { font-size: var(--head-font); } .answer-area { /* 行高由 JS 按 answerLines 计算，这里给基准值 */ line-height: var(--answer-line); }

换科目时只改变量：语文卷头字号大一点，把--head-font调到 18pt；数学答题行多，把--answer-line调到 10mm；密封线要求窄的，把--seal-width调到 20mm。这样不用改结构，也不会把已经调好的拼版规则弄乱。

验证方法很简单：准备三份不同科目的 JSON，用同一套模板渲染，打印对折后检查三件事——页码顺序、密封线位置、答题区是否够写。三份都过，模板就算稳了。我自己的习惯是每次改完变量，先打一份 8 页空白卷对折，用红笔在每页写页码，确认拼版没错再灌真实题目。这个“空白卷对折验证”帮我省过很多次返工，因为拼版错误在屏幕上根本看不出来，只有对折后才现形。希望帮到你。

本文还有配套的精品资源，点击获取