如何在生成二维码的同时将表单数据保存为文本文件-html教程-PHP中文网

如何在生成二维码的同时将表单数据保存为文本文件

本文详解如何使用纯前端技术（HTML + JavaScript）构建一个表单，实现一键生成结构化二维码并同步导出数据到 .txt 文件，重点解决按钮冲突、表单默认提交干扰及跨脚本协作问题。

本文详解如何使用纯前端技术（html + javascript）构建一个表单，实现一键生成结构化二维码并同步导出数据到 `.txt` 文件，重点解决按钮冲突、表单默认提交干扰及跨脚本协作问题。

在开发中，常需将表单数据同时可视化为二维码（便于扫码识别）并持久化为可读文本（便于归档或审核）。你提供的代码已具备良好基础，但存在一个关键缺陷：

。当点击“Generar Qr”按钮时，浏览器会尝试提交整个表单——触发页面刷新或跳转，导致 QR 生成逻辑（绑定在 click 事件上的 JS）根本无法执行。

✅ 正确做法：阻止默认表单提交行为

只需在 QR 生成按钮的事件处理函数中添加 event.preventDefault()，即可彻底隔离两个功能：

<script>
$(document).ready(function () {
    $('#generate').click(function (event) {
        event.preventDefault(); // ← 关键修复：阻止表单默认提交

        const codigo = $('#input1').val().trim();
        const laboratorio = $('#input2').val().trim();
        const producto = $('#input3').val().trim();
        const precio = $('#input4').val().trim();
        const principioActivo = $('#principio-activo').val().trim();

        // 构建结构化数据对象（更语义化，便于扩展）
        const qrData = {
            codigo,
            laboratorio,
            producto,
            precio,
            principio_activo: principioActivo
        };

        // 序列化为 JSON 字符串（确保 URL 安全编码）
        const jsonStr = JSON.stringify(qrData);
        const encodedData = encodeURIComponent(jsonStr);

        // 使用 Google Charts API 生成 QR（注意：该服务已弃用，建议迁移到客户端库）
        const qrUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodedData}&chs=200x200&choe=UTF-8`;

        // 渲染到页面
        $('#qrcode').html(`<img src="${qrUrl}" alt="QR Code" class="qr-code">`);
    });
});
</script>

⚠️ 重要提醒（兼容性与现代实践）：
Google Chart API 的 QR 服务已于 2019 年停止维护，生产环境请改用轻量级客户端库如 qrcode.js。示例迁移：
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
QRCode.toCanvas(document.getElementById('qrcode'), jsonStr, { width: 200 }, function (error) {
  if (error) console.error('QR 生成失败:', error);
});

? 数据导出逻辑优化建议

当前的 .txt 导出功能工作正常，但可增强健壮性：

添加空值校验，避免导出空白行；
统一换行符（\n），适配 Windows/macOS/Linux；
建议将导出逻辑封装为复用函数：

function exportToTxt() {
    const fields = [
        ['Codigo', $('#input1').val()],
        ['Laboratorio', $('#input2').val()],
        ['Producto', $('#input3').val()],
        ['Precio', $('#input4').val()],
        ['Principio Activo', $('#principio-activo').val()]
    ];

    const content = fields
        .map(([k, v]) => `${k}: ${v || '(vacío)'}`)
        .join('\n') + '\n';

    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = Object.assign(document.createElement('a'), {
        href: url,
        download: `qr_data_${new Date().toISOString().slice(0,10)}.txt`
    });
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// 绑定到按钮
document.getElementById('submit-button').addEventListener('click', exportToTxt);