如何在网页中同时生成QR码并导出表单数据为.txt文件

正确做法：使用 event.preventDefault()

在生成 QR 码的事件处理函数中，添加一行 event.preventDefault() 即可截断表单的默认提交行为。示例代码如下：

注意事项：

• 务必为所有 显式指定 type： 表示无默认行为； 仅用于真正需要提交的场景。
• 输入校验建议增强：生产环境应检查必填字段是否为空，避免生成空 QR 或无效文本。
• QR 内容安全性：Google Chart API 已弃用（2023 年起逐步停服），强烈建议迁移到客户端 QR 库（如 qrcode.js），避免网络依赖与隐私风险。示例：

文本导出逻辑已正确，但可优化体验

原有的 .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 码 + 一键导出文本」的双功能，既可用又可靠。