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

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

本文详解如何在单页 HTML 应用中实现：用户填写表单后，点击按钮既生成可下载的 QR 码（含结构化数据），又将原始表单内容保存为本地 .txt 文件，重点解决表单默认提交导致脚本中断的问题。

本文详解如何在单页 html 应用中实现：用户填写表单后，点击按钮既生成可下载的 qr 码（含结构化数据），又将原始表单内容保存为本地 `.txt` 文件，重点解决表单默认提交导致脚本中断的问题。

在实际开发中，常需将表单数据可视化（如生成 QR 码）并持久化（如导出为文本文件）。但初学者易忽略一个关键细节：HTML 表单内 ——即使未显式设置 type="submit"，在部分浏览器或上下文中仍可能触发表单提交，导致页面刷新、JavaScript 执行中断，从而使 QR 生成或文件下载逻辑失效。

你提供的代码中，#generate 按钮位于

标签内，且未声明 type="button"，因此点击时会触发表单提交，页面重载，后续 jQuery 脚本无法执行。解决方案非常明确：阻止默认提交行为。

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

只需在生成 QR 码的事件处理函数中添加 event.preventDefault()，即可彻底阻止表单提交：

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

<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>

⚠️ 注意事项：
务必为所有 ：

输入校验建议增强：生产环境应检查必填字段是否为空，避免生成空 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');
});