如何将HTML5 QR Code扫描结果转为可点击链接？

我来帮你搞定这个问题！你之前遇到的链接地址不对的核心原因是：静态写死的<a>标签里的href不会自动识别JS变量，得通过动态生成链接的方式来实现。

问题根源 #

你之前尝试的<a id="result" href="https://www.google.com/+qrCodeMessage+"></a>里，qrCodeMessage只是个静态字符串，浏览器不会把它当成扫描到的实际内容来解析，所以链接地址会变成https://www.google.com/+qrCodeMessage+，而不是你想要的扫描结果拼接后的地址。

解决方案 #

我们只需要修改扫描成功的回调函数，动态生成带正确地址的链接即可，HTML结构甚至可以保留原来的样子：

步骤1：保留原有HTML结构

不需要改动结果容器的结构，保持它作为链接的承载容器：

<div class="col" style="padding:30px;">
  <h4>SCAN RESULT</h4>
  <div id="result">Result Here</div>
</div>

步骤2：修改onScanSuccess函数

根据你的需求（把扫描结果拼到Google链接后），我们动态生成<a>标签并插入到结果容器中：

function onScanSuccess(qrCodeMessage) {
  // 拼接目标链接：把扫描结果加到Google地址末尾
  const targetUrl = `https://www.google.com/${qrCodeMessage}`;
  // 生成带样式的可点击链接，target="_blank"让链接在新标签页打开
  const linkHtml = `<a href="${targetUrl}" target="_blank" class="result">${qrCodeMessage}</a>`;
  // 更新结果容器的内容
  document.getElementById('result').innerHTML = linkHtml;
}

如果你的扫描结果本身就是完整URL（比如https://example.com），直接用扫描结果作为链接地址即可：

function onScanSuccess(qrCodeMessage) {
  const targetUrl = qrCodeMessage;
  const linkHtml = `<a href="${targetUrl}" target="_blank" class="result">${qrCodeMessage}</a>`;
  document.getElementById('result').innerHTML = linkHtml;
}

完整修改后的代码

整合所有内容后的完整代码如下：

<script src="html5-qrcode.min.js"></script>
<style>
  .result{
    background-color: green;
    color:#fff;
    padding:20px;
    display: inline-block; /* 让背景色适配链接内容宽度 */
  }
  .row{
    display:flex;
  }
</style>

<div class="row">
  <div class="col">
    <div style="width:500px;" id="reader"></div>
  </div>
  <div class="col" style="padding:30px;">
    <h4>SCAN RESULT</h4>
    <div id="result">Result Here</div>
  </div>
</div>

<script type="text/javascript">
function onScanSuccess(qrCodeMessage) {
  // 这里可以切换成你需要的链接生成逻辑
  const targetUrl = `https://www.google.com/${qrCodeMessage}`;
  const linkHtml = `<a href="${targetUrl}" target="_blank" class="result">${qrCodeMessage}</a>`;
  document.getElementById('result').innerHTML = linkHtml;
}

function onScanError(errorMessage) {
  // 可选：添加扫描错误的提示逻辑，比如 console.log('扫描出错:', errorMessage);
}

var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>

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