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

作者：袖梨 2026-07-08

本文详解如何在单页 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/[email protected]/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');});