這個文章來說明何設計出一個自製的QR Code產生器。

Google Charts有一個功能可以產生QR Code，說明在此：https://developers.google.com/chart/infographics/docs/qr_codes

搭配JS裡頭的函式：encodeURIComponent()

最後搭配Google Sheets就可以完成！

範例：

以下為分享的程式：

code.gs

//建立Web App
function doGet() {
  var file = HtmlService.createTemplateFromFile("QR");//請更改成您使用的首頁名稱
  var evaluate = file.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');//響應式網站
  var html = evaluate.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return html;
}



function getQRCode(url) {
  var imageUrl = 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=' + encodeURIComponent(url);
  return imageUrl;
}

QR.html

<!DOCTYPE html>
<html lang="en">
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    #progressContainer {
      display: none;
    }

    .container{
      width:50%;
      margin:0 auto;
      border:1px solid gray;
      box-shadow: 5px 5px 5px gray;
      border-radius:15px;
      padding:30px;
    }

    #qrCodeImage{
  margin:0 auto;


    }
    #progressBar {
      width: 0;
      height: 20px;
      background-color: #4CAF50;
      animation: progressAnimation 5s; /* 5s is the animation duration */
    }

@media only screen and (max-width: 600px) {

    .container{
      width:90%;
 
      padding:10px;
    }
}

    @keyframes progressAnimation {
      from { width: 0; }
      to { width: 100%; }
    }
  </style>
</head>
<body>

<div class="container mt-5">
  <img src="https://i.imgur.com/r1Zz4gN_d.webp?maxwidth=760&fidelity=grand" width="80px" height="60px">
  <h2 class="mb-4 text-center">QR Code 產生器</h2>
  <div class="mb-3">
    <input type="text" id="urlInput" class="form-control" placeholder="Paste URL">
  </div>
  <button class="btn btn-primary mb-3" onclick="generateQRCode()">產生 QR Code</button>
  <br>
  <img id="qrCodeImage" class="img-fluid mb-3" alt="QR Code 會在此處產生">
  <div id="downloadMessage" class="alert alert-success" role="alert" style="display: none;">按滑鼠右鍵下載</div>
  <div id="progressContainer">
    <div id="progressBar" class="mb-3"></div>
  </div>
</div>

<script>
  function generateQRCode() {
    // Clear previous QR code and download message
    document.getElementById('qrCodeImage').src = '';
    document.getElementById('downloadMessage').style.display = 'none';

    var url = document.getElementById('urlInput').value;
    var progressBar = document.getElementById('progressBar');
    var progressContainer = document.getElementById('progressContainer');
    var downloadMessage = document.getElementById('downloadMessage');

    progressContainer.style.display = 'block';

    // Simulate progress animation
    var progress = 0;
    var interval = setInterval(function() {
      progress += 2;
      progressBar.style.width = progress + '%';

      if (progress >= 100) {
        clearInterval(interval);
        // Callback to update QR code and show download message
        google.script.run.withSuccessHandler(function(imageUrl) {
          progressContainer.style.display = 'none';
          qrCodeImage.src = imageUrl;
          downloadMessage.style.display = 'block';
        }).getQRCode(url);
      }
    }, 100); // Adjust the interval for smoother animation
  }
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

發表迴響