如何在生成 QR 码的同时将表单数据保存为本地 TXT 文件-js教程-PHP中文网

本文详解如何在一个 HTML 页面中同时实现：① 通过按钮生成基于表单输入的 QR 码（使用 Google Charts API），② 另一按钮一键导出结构化数据为 .txt 文件；重点解决表单默认提交行为导致 QR 生成功能失效的问题。

本文详解如何在一个 html 页面中同时实现：① 通过按钮生成基于表单输入的 qr 码（使用 google charts api），② 另一按钮一键导出结构化数据为 `.txt` 文件；重点解决表单默认提交行为导致 qr 生成功能失效的问题。

在实际开发中，常需将用户输入信息以多种方式持久化或可视化——例如生成 QR 码便于快速扫码读取，同时保存原始文本用于归档或审核。但初学者常遇到一个典型问题：当两个功能共存于同一

内时，点击“生成 QR”按钮会触发表单默认提交（页面刷新或跳转），导致 JavaScript 逻辑中断，QR 码无法渲染。

根本原因在于：HTML 表单内任意

✅ 正确解法是阻止表单默认提交行为。只需在事件处理函数中调用 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,
            principioActivo: principioActivo
        };

        // 序列化为 JSON 字符串并编码，确保 URL 安全
        const jsonStr = JSON.stringify(data);
        const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodeURIComponent(jsonStr)}&chs=200x200&chld=L`;

        // 渲染 QR 图片到指定容器
        $('#qrcode').html(`<img src="${qrCodeUrl}" alt="QR Code" class="qr-code">`);
    });
});
</script>

? 注意细节优化：

PHP的二维码生成库
PHP的二维码生成库

下载

使用 .trim() 清除首尾空格，避免生成空白 QR 或脏数据；

为 chld=L 参数添加容错等级（L=低纠错），提升扫码鲁棒性；

为添加 class="qr-code" 以复用 CSS 样式，保持视觉一致性；

#qrcode 容器建议设为 display: flex; justify-content: center; 替代 float:left，避免布局塌陷。

对于“保存数据为 TXT”功能，原代码已基本正确，但可进一步增强健壮性：

document.getElementById('submit-button').addEventListener('click', function () {
    const formData = {
        codigo: document.querySelector('[name=codigo]').value?.trim() || 'N/A',
        laboratorio: document.querySelector('[name=laboratorio]').value?.trim() || 'N/A',
        producto: document.querySelector('[name=producto]').value?.trim() || 'N/A',
        precio: document.querySelector('[name=precio]').value?.trim() || 'N/A',
        principioActivo: document.getElementById('principio-activo').value?.trim() || 'N/A'
    };

    const textContent = `Codigo: ${formData.codigo}
Laboratorio: ${formData.laboratorio}
Producto: ${formData.producto}
Precio: ${formData.precio}
Principio Activo:
${formData.principioActivo}`;

    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`; // 带日期的文件名，避免覆盖
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});

? 关键总结：