本文详解如何在单页 HTML 应用中实现：用户填写表单后，点击按钮既生成可下载的 QR 码（含结构化数据），又将原始表单内容保存为本地 .txt 文件，重点解决表单默认提交导致脚本中断的问题。
本文详解如何在单页 html 应用中实现：用户填写表单后，点击按钮既生成可下载的 qr 码（含结构化数据），又将原始表单内容保存为本地 `.txt` 文件，重点解决表单默认提交导致脚本中断的问题。
在实际开发中，常需将表单数据可视化（如生成 QR 码）并持久化（如导出为文本文件）。但初学者易忽略一个关键细节：HTML 表单内 <button> 默认行为是 submit——即使未显式设置 type="submit"，在部分浏览器或上下文中仍可能触发表单提交，导致页面刷新、JavaScript 执行中断，从而使 QR 生成或文件下载逻辑失效。
你提供的代码中，#generate 按钮位于 <form> 标签内，且未声明 type="button"，因此点击时会触发表单提交，页面重载，后续 jQuery 脚本无法执行。解决方案非常明确：阻止默认提交行为。
✅ 正确做法：使用 event.preventDefault()
只需在生成 QR 码的事件处理函数中添加 event.preventDefault()，即可彻底阻止表单提交：
<script>
$(document).ready(function () {
$('#generate').click(function (event) {
event.preventDefault(); // ← 关键修复：阻止表单默认提交
const input1 = $('#input1').val().trim();
const input2 = $('#input2').val().trim();
const input3 = $('#input3').val().trim();
const input4 = $('#input4').val().trim();
const principioActivo = $('#principio-activo').val().trim();
// 构建结构化数据对象（推荐比纯字符串更健壮）
const data = {
codigo: input1,
laboratorio: input2,
producto: input3,
precio: input4,
principio_activo: principioActivo
};
// 序列化为 JSON 字符串（确保 URL 安全编码）
const jsonStr = JSON.stringify(data);
const qrUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodeURIComponent(jsonStr)}&chs=200x200`;
// 渲染 QR 图片
$('#qrcode').html(`<img src="${qrUrl}" alt="QR Code" class="qr-code">`);
});
});
</script>⚠️ 注意事项：
- 务必为所有 <button> 显式指定 type：<button type="button"> 表示无默认行为；<button type="submit"> 仅用于真正需要提交的场景。
- 输入校验建议增强：生产环境应检查必填字段是否为空，避免生成空 QR 或无效文本。
- QR 内容安全性：Google Chart API 已弃用（2023 年起逐步停服），强烈建议迁移到客户端 QR 库（如 qrcode.js），避免网络依赖与隐私风险。示例：
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/qrcode.min.js"></script> <script> QRCode.toCanvas(document.getElementById('qrcode'), jsonStr, { width: 200 }, function (error) { if (error) console.error('QR 生成失败', error); }); </script>
✅ 文本导出逻辑已正确，但可优化体验
你原有的 .txt 下载逻辑（基于 Blob + URL.createObjectURL）完全可行，但建议补充两点提升用户体验：
- 添加简单成功提示（如 Toast）；
- 对空字段做降级处理（例如用 "N/A" 替代空白）：
document.getElementById('submit-button').addEventListener('click', function () {
const fields = {
Codigo: document.querySelector('[name=codigo]').value || 'N/A',
Laboratorio: document.querySelector('[name=laboratorio]').value || 'N/A',
Producto: document.querySelector('[name=producto]').value || 'N/A',
Precio: document.querySelector('[name=precio]').value || 'N/A',
'Principio Activo': document.getElementById('principio-activo').value || 'N/A'
};
const textContent = Object.entries(fields)
.map(([k, v]) => `${k}: ${v}`)
.join('\n');
const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `qr_data_${new Date().toISOString().slice(0,10)}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 可选：轻量提示
alert('✅ Datos guardados exitosamente como archivo .txt');
});总结
- 核心问题：表单内按钮未阻止默认提交，导致脚本中断；
- 根本解法：event.preventDefault() 是必备前置操作；
- 进阶建议：迁移到客户端 QR 库、增强输入校验、优化导出命名与提示；
- 最佳实践：所有交互按钮明确设置 type="button"，从源头规避歧义。
通过以上调整，你的应用即可稳定实现「一键生成 QR 码 + 一键导出文本」双功能，兼顾可用性与可维护性。
