GAS，Bootstrap Web 表单在 table 中搜索和显示数据，但它不显示链接或超链接以单击它们（来自电子表格）

Question

这是网络应用程序

https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec

知道如何让它显示某些单元格的链接或超链接吗？

我主要是根据教程制作了这个网络表单，所以我有点新，我试图理解大部分代码，但对我来说真的很难，所以如果这对菜鸟来说太难处理了我明白了

这是代码 code.gs

      function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}


/* PROCESS FORM */
function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){//Execute if form passes search text
      result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 
function search(searchtext){
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];
  
  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

第二个文件

索引HTML文件

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        
        <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
        <script>
          //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+                               //Change table headings to match witht he Google Sheet
                              "<th scope='col'>ORDERNUMBER</th>"+
                              "<th scope='col'>QUANTITYORDERED</th>"+
                              "<th scope='col'>PRICEEACH</th>"+
                              "<th scope='col'>ORDERLINENUMBER</th>"+
                              "<th scope='col'>SALES</th>"+
                              "<th scope='col'>ORDERDATE</th>"+
                              "<th scope='col'>STATUS</th>"+
                              "<th scope='col'>QTR_ID</th>"+
                              "<th scope='col'>MONTH_ID</th>"+
                              "<th scope='col'>YEAR_ID</th>"+
                              "<th scope='col'>PRODUCTLINE</th>"+
                              "<th scope='col'>MSRP</th>"+
                              "<th scope='col'>PRODUCTCODE</th>"+
                              "<th scope='col'>CUSTOMERNAME</th>"+
                              "<th scope='col'>PHONE</th>"+
                              "<th scope='col'>ADDRESSLINE1</th>"+
                              "<th scope='col'>ADDRESSLINE2</th>"+
                              "<th scope='col'>CITY</th>"+
                              "<th scope='col'>STATE</th>"+
                              "<th scope='col'>POSTALCODE</th>"+
                              "<th scope='col'>COUNTRY</th>"+
                              "<th scope='col'>TERRITORY</th>"+
                              "<th scope='col'>CONTACTLASTNAME</th>"+
                              "<th scope='col'>CONTACTFIRSTNAME</th>"+
                              "<th scope='col'>DEALSIZE</th>"+
                            "</tr>"+
                          "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
        
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
            
                  <!-- ## SEARCH FORM ------------------------------------------------ -->
                  <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <label for="searchtext">Search Text</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Search Text">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">Search</button>
                  </form>
                  <!-- ## SEARCH FORM ~ END ------------------------------------------- -->
              
              </div>    
            </div>
            <div class="row">
              <div class="col">
            
                <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
                <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
                  
              </div>
            </div>
        </div>
    </body>
</html>

示例数据

Photoshop 输出

Answer 1

我相信你的目标如下。

您想将问题中的图像从 Sample Data 转换为 Photoshopped output。
“K”列有超链接，您想将超链接设置到 HTML 侧。

修改点：

当我看到你的脚本时，使用了Sheets.Spreadsheets.Values.get。在这种情况下，不幸的是，无法直接检索超链接。
在这种情况下，我想提出以下流程。
1. 从列“K”中检索值并检索具有 getRichTextValues 的 URL。
2. 创建返回Javascript端的数组。

当以上几点反映到你的脚本中，就会变成下面这样。

修改后的脚本：

请将Google Apps Script端的函数search修改如下。

function search(searchtext) {
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!

  // 1. Retrieve values from the column "K" and retrieve the URLs with getRichTextValues.
  var ss = SpreadsheetApp.openById(spreadsheetId);
  var [sheetName, a1Notation] = dataRage.split("!");
  var sheet = ss.getSheetByName(sheetName);
  var lastRow = sheet.getLastRow();
  var range = sheet.getRange(a1Notation + lastRow);
  var richTextValues = range.offset(0, 10, lastRow, 1).getRichTextValues().map(([k]) => {
    var url = k.getLinkUrl();
    var text = k.getText();
    return url ? `<a href="${url}">${text}</a>` : text;
  });

  // 2. Create an array for returning to Javascript side.
  var values = range.getDisplayValues().reduce((ar, r, i) => {
    if (r.includes(searchtext)) {
      r[10] = richTextValues[i];
      ar.push(r);
    }
    return ar;
  }, []);
  return values;
}

注：

当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映到 Web 应用程序中。请注意这一点。
您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中看到详细信息。
我建议使用您的示例输入和输出图像修改上述脚本。因此，当您的实际情况与此不同时，脚本可能无法使用。请注意这一点。

GAS，Bootstrap Web 表单在 table 中搜索和显示数据，但它不显示链接或超链接以单击它们（来自电子表格）

GAS, Bootstrap Web form Searches and Shows Data in a table, BUT it does NOT show links or hyperlinks to click on them (from spreadsheet)

javascript

hyperlink

google-sheets

google-apps-script

bootstrap-5

修改点：

修改后的脚本：

注：

参考文献：