Google apps script 使用Google脚本打开包含数据的HTML文件_Google Apps Script_Web Applications

Google apps script 使用Google脚本打开包含数据的HTML文件

google-apps-script web-applications

Google apps script 使用Google脚本打开包含数据的HTML文件,google-apps-script,web-applications,Google Apps Script,Web Applications,我正在尝试使用google脚本在HTML文件中显示一组数据，但是，我的数据似乎没有进入HTML文件，我不知道为什么。有人能告诉我我错过了什么吗路径：htmlist.html <!DOCTYPE html> <html> <head> <base target="_top" /> </head> <body> My HTML page <? for(var i

我正在尝试使用google脚本在HTML文件中显示一组数据，但是，我的数据似乎没有进入HTML文件，我不知道为什么。有人能告诉我我错过了什么吗

路径：

htmlist.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
  </head>
  <body>
    My HTML page

    <? for(var i = 0; i <= (users.length -1); i++) { ?>

    <p><?= users[i].firstName ?></p>
    <? } ?>
  </body>
</html>

假设电子表格上的数据如下所示-

所需的输出如下所示（您可以自由修改

.html

文件中的CSS）-

您可以使用以下代码来实现这一点-

对于代码.gs：

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

function getUsers() {
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var users = ss.getRange(1, 1, ss.getLastRow(), 1).getValues();
  return users;
}

对于Index.html文件：

<!DOCTYPE html>
<html>

<head>
    <base target="_top">

    <script>
        function onSuccess1(users) {
            var div = document.getElementById('userFirstNames');
            div.innerHTML = users;
        }
        google.script.run.withSuccessHandler(onSuccess1).getUsers();
    </script>

</head>

<body>
    <div id='userFirstNames'></div>
</body>

</html>


函数onSuccess1（用户）{
var div=document.getElementById（'userFirstNames'）；
div.innerHTML=用户；
}
google.script.run.withSuccessHandler（onSuccess1.getUsers（）；

希望这有帮助。

在脚本编辑器中运行该函数时，您希望使用创建的HTML数据为自己的浏览器打开新选项卡
您正在使用容器绑定脚本

如果我的理解是正确的，这次修改怎么样

修改点：在这次修改中，我使用了以下流程。请把这看作是几个答案中的一个

通过运行

runScript（）

，将打开一个对话框

打开的对话框运行Javascript以打开浏览器的新选项卡并打开Web应用程序的URL。

此时，将从
```
doGet（）
```
运行
```
generateLink（）
```
，并检索值并将其放入HTML数据中

关闭对话框

通过该流程，当您在脚本编辑器中运行该函数时，创建的HTML将作为浏览器的新选项卡打开

修改脚本：请将以下脚本复制并粘贴到电子表格的容器绑定脚本。然后，请将Web应用重新部署为新版本。此时，作为一个测试用例，请分别将

执行应用程序设置为：

和

谁有权访问该应用程序：

设置为

Me

和

任何人，甚至是匿名的。在这种情况下，您不需要修改HTML端的脚本
function doGet() {
  var html = HtmlService.createTemplateFromFile("htmlList");
  html.users = generateLinks(); // Modified
  return html.evaluate().setTitle("Test my app");
}

function generateLinks() {
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rr = spreadSheet.getLastRow();

  var users = [];
  for (var i = 3; i <= rr; i++) {
    var firstName = spreadSheet.getRange(i, 1).getValue();

    var user = {
      firstName: firstName
    };

    users.push(user);
  }
  return users; // Modified
}

// I added the following function. Please run this function.
function runScript() {
  var url = ScriptApp.getService().getUrl();
  var script = "<script>window.open('" + url + "', '_blank').focus();google.script.host.close();</script>";
  var html = HtmlService.createHtmlOutput(script);
  SpreadsheetApp.getUi().showModalDialog(html, 'sample');
}

函数doGet（）{
var html=HtmlService.createTemplateFromFile（“htmlist”）；
html.users=generateLink（）；//已修改
返回html.evaluate（）.setTitle（“测试我的应用程序”）；
}
函数生成器{
var电子表格=SpreadsheetApp.getActiveSpreadsheet（）.getActiveSheet（）；
var rr=电子表格.getLastRow（）；
var用户=[]；
对于脚本中的（var i=3；i），当运行generateLinks（）
时，从generateLinks（）
返回的值不起作用。当doGet（users）
作为Web应用程序执行时，users
不会被声明。例如，如何修改return html.evaluate（）.setTitle（“测试我的应用程序”）
toSpreadsheetApp.getUi（）.showmodaldialdialog（html.evaluate（）.setTitle（“测试我的应用”），“示例”）
？当generateLinks（）时
运行时，您可以在对话框中看到HTML。但是我不确定这是否是您想要的方向。那么我可以问一下您的目标吗？我不确定我是否遵循了您所说的。当generateLinks（）
运行doGet（用户）
时，将用户数据传递给函数。如果我使用Logger.log（用户）
在函数doGet（users）
中，它正确显示了所有数据。感谢您的回复。我可以问一下如何使用Google脚本打开包含数据的HTML文件吗？我不明白您想如何使用doGet（）的函数
。是否要通过Web应用程序或对话框和侧栏打开HTML？我只想将用户数据传递到HTML文件，并在浏览器中打开并显示该数据。当前，如果我发布该网页，该网页将打开，并显示我的HTML页面，但不会显示任何用户的名字。在您的情况下，您可以打开他通过访问Web应用的URL使用自己的浏览器创建HTML。我的理解正确吗？@bp123感谢您的回复和测试。我很高兴您的问题得到解决。也谢谢您。
function doGet() {
  var html = HtmlService.createTemplateFromFile("htmlList");
  html.users = generateLinks(); // Modified
  return html.evaluate().setTitle("Test my app");
}

function generateLinks() {
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rr = spreadSheet.getLastRow();

  var users = [];
  for (var i = 3; i <= rr; i++) {
    var firstName = spreadSheet.getRange(i, 1).getValue();

    var user = {
      firstName: firstName
    };

    users.push(user);
  }
  return users; // Modified
}

// I added the following function. Please run this function.
function runScript() {
  var url = ScriptApp.getService().getUrl();
  var script = "<script>window.open('" + url + "', '_blank').focus();google.script.host.close();</script>";
  var html = HtmlService.createHtmlOutput(script);
  SpreadsheetApp.getUi().showModalDialog(html, 'sample');
}