如何生成带唯一标识的条形码，扫码跳转表单并区分扫码来源

一、React + EmailJS 实现方案 #

1. URL参数传递条形码ID（最直接） #

生成条形码时，把每个条码的内容设为落地页URL加上?barcodeId=xxx，比如扫Barcode 1跳转到https://your-react-app.com/form?barcodeId=barcode1，Barcode 2对应https://your-react-app.com/form?barcodeId=barcode2。

在React组件里，用URLSearchParams获取这个参数：

import { useEffect, useState } from 'react';
import emailjs from '@emailjs/browser';

function FormPage() {
  const [barcodeId, setBarcodeId] = useState('');

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const id = params.get('barcodeId');
    if (id) setBarcodeId(id);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      name: e.target.name.value,
      email: e.target.email.value,
      barcodeId: barcodeId
    };

    emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', formData)
      .then(() => alert('提交成功'))
      .catch((err) => console.error('提交失败:', err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <input type="hidden" name="barcodeId" value={barcodeId} />
      <button type="submit">提交</button>
    </form>
  );
}

EmailJS的邮件模板里，直接用{{barcodeId}}就能插入条码ID，比如写“条码ID：{{barcodeId}}，用户姓名：{{name}}”即可。

2. 本地存储辅助（防参数篡改/临时持久化） #

如果担心用户手动修改URL参数，可以把条码ID存在sessionStorage里，提交时再取出：

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const id = params.get('barcodeId');
  if (id) {
    setBarcodeId(id);
    sessionStorage.setItem('scannedBarcodeId', id);
  }
}, []);

const handleSubmit = (e) => {
  e.preventDefault();
  const savedId = sessionStorage.getItem('scannedBarcodeId');
  const formData = {
    name: e.target.name.value,
    email: e.target.email.value,
    barcodeId: savedId || barcodeId
  };
  // 发送邮件逻辑同上
};

SessionStorage会在页面关闭后清空，不会影响用户下次扫描其他条码。

二、MS Forms 备选方案 #

MS Forms本身不支持直接读取URL参数，可通过Power Automate中转实现：

1. Power Automate 触发+跳转+合并数据 #

• 生成条形码时，把条码内容设为Power Automate手动触发链接，带上barcodeId参数，比如https://prod-xx.flow.microsoft.com/manualTrigger/xxx?barcodeId=barcode1。
• 在Power Automate流程里，先接收barcodeId并存入变量，再跳转到你的MS Forms页面。
• 用户提交表单后，Power Automate触发“当表单提交时”的流程，把表单内容和之前保存的barcodeId合并，发送到指定邮箱。

2. 隐藏字段填充（简化版） #

给MS Forms添加一个文本字段，设置为必填后用CSS隐藏（发布后在页面自定义样式），生成条码时用https://forms.office.com/Pages/ResponsePage.aspx?id=xxx&barcodeId=barcode1，再通过Power Automate读取表单提交内容时，把URL中的barcodeId和表单数据合并发送邮件。

注意事项 #

• 生成条码时要对barcodeId做URL编码，避免特殊字符导致参数读取失败。
• React项目里可以加简单校验，比如barcodeId为空时提示用户重新扫描条码。
• 用MS Forms时，隐藏字段要确保用户无法修改，或在Power Automate里校验条码ID的合法性。

内容的提问来源于stack exchange，提问作者carlosesierra