Google App Script：如何显示带有模板化 HTML 链接的 google 驱动器文件答案

【问题标题】：Google App Script: how to display google drive files with links to templated HTMLGoogle App Script：如何显示带有模板化 HTML 链接的 google 驱动器文件
【发布时间】：2021-06-11 20:55:42
【问题描述】：

我是 Google 应用脚本和 JavaScript 方面的新手。所以，我试图用链接显示从我的 Google Drive 中抓取的文件，但是在运行 displayData(); 时，它实际上是在页面上显示链接和文件的标题，而没有实际链接。这是html的图片 output.

这是我目前所拥有的：

代码.gs

function doGet() {
  var output = HtmlService.createTemplateFromFile('Page').evaluate();
  return output;
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

function displayData() {
  var dir = 'Somefoldername';
  var foldername = DriveApp.getFoldersByName(dir).next();
  var foldercont = foldername.getFiles();
  var listicon = '<img src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document">';
  var file, title, links, list = []; 
  while (contents.hasNext()) {
    file = foldercont.next();
    title = file.getName();
    links = file.getUrl();
    date = file.getDateCreated();
    
    list.push('<tr><td>' + listicon + '<a href ="' + links + '">' + title +'</td></tr>');
  }
  return list;

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <div class="doclist">
    <?= displayData(); ?>

    </div>
  </body>
</html>

如何在 html 模板中显示 Google Drive 文件的超链接？

谢谢。

【问题讨论】：

内容未定义

标签： google-apps-script

【解决方案1】：

这是一个示例代码：

注意：

我暂时删除了html文件中的<?!= include('Stylesheet'); ?>，因为它没有定义。

代码.gs

function doGet() {
  var output = HtmlService.createTemplateFromFile('Page').evaluate();
  return output;
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

function displayData() {
  var dir = 'Somefoldername';
  var foldername = DriveApp.getFoldersByName(dir).next();
  var foldercont = foldername.getFiles();
  var listicon = '<img src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document">';
  var file, title, links, list = []; 
  while (foldercont.hasNext()) {
    file = foldercont.next();
    title = file.getName();
    links = file.getUrl();
    date = file.getDateCreated();
    
    list.push('<tr><td>' + listicon + '<a href ="' + links + '">' + title +'</td></tr>');
  }
  return list.join(' ');
}

修改完成：

将while (contents.hasNext()) 替换为while (foldercont.hasNext())
使用array.join(' ') 将您的数组list 组合成一个字符串，其中spaces 作为它的separator

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
    google.script.run.withSuccessHandler(function(tblStr){
      document.getElementById('FileList').innerHTML = tblStr;
    }).displayData();
    </script>
    <table id="FileList">
    </table>
  </body>
</html>

修改完成：

我在 html 正文中添加了一个 ID 为“FileList”的表格
我使用google.script.run.withSuccessHandler(function).displayData() 调用了服务器端函数displayData()。 displayData() 的返回值将传递给回调函数的第一个参数。
我使用此过程document.getElementById('FileList').innerHTML = tblStr; 根据displayData() 的返回值更新了表格的内容

输出：

【讨论】：

我尝试在最后添加“list.join()”，但似乎仍然没有显示。猜猜我想调用服务器端函数，这是 html 模板中缺少的函数。谢谢

【解决方案2】：

一些观察：

该函数正在返回一个数组list = []，并且您正在将数据推送到该数组中。
屏幕截图中的 HTML 在每个项目之间都有逗号：...</td></tr>,<tr><td>...。
您不应该将<div> 放在表格中。

这两个建议您应该将数据附加到字符串变量，而不是将数据推送到数组中。

然后从您的函数中返回该字符串，而不是数组。

字符串变量将包含 HTML 行和列的全部内容。

对于<div>，将其删除并将类放在正文中：

<body class="doclist">

根据您的 CSS 设置方式，可能需要进行修改以适应这种变化。

最终建议：获取生成的 HTML 并通过验证器运行它 - 例如：https://validator.w3.org/#validate_by_input

这可能会发现一些需要纠正的额外问题。

【讨论】：