在我的google web应用程序上构建报告历史记录

我想知道我该怎么做

背景： 我有一个用Google Apps脚本构建的web应用程序。我的web应用程序将16张电子表格显示在HTML页面上

我现在的目标是建立该报告的历史记录（例如，每次单击按钮时，它的“将报告保存在新链接中”）

我考虑了两种选择：

首先：保存html内容->创建新的html页面并插入html内容。（然后循环到存储库以获取链接）

第二：每次保存电子表格（但我不知道如何动态获取新电子表格的id）

有什么建议吗

编辑 Code.gs//获取电子表格数据

var url = "https://docs.google.com/spreadsheets/d/1klU634iH2nHNMiFeLxAL39KfV8pwoGtstEkWS21gK48/edit#gid=785104696";
var ss = SpreadsheetApp.openByUrl(url);
var cps = ss.getSheetByName("Cockpit 2019").getRange(9,1,27,10).getValues();
...
...
var sts = ss.getSheetByName("TCD - STEAM");
var datas= [wls, bss, bis, mwds,hds ,bfas,ess, its, rs, itses, secus, ddfs, d2sis, dmcs, gclouds, sts];

function doGet(e) {
  var tmp = HtmlService.createTemplateFromFile("page");




  return tmp.evaluate(); 
}

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

function getSheetDetails(datas) {
  var rows = datas.getLastRow();
  var cols = datas.getLastColumn();
  return datas.getRange(1,1,rows, cols).getValues();
}

function getallDatas() {
  var allSheets = []
  for(var i = 0; i< datas.length; i++){
     var temp = 0;
    temp = getSheetDetails(datas[i]);
    allSheets.push(temp);
  }
return allSheets
}

在链接的“我的Html”页面中：

 <ul id="dropdown1" class="dropdown-content">
  <? for(var i =0; i<list.length; i++) {?>
  <li><a href="#" onClick="getHistory(<?=list[i]?>)" target="_self"><?= listNames[i] ?></a> </li>
  <?} ?>

在我的JS上，我将旧的电子表格传递给我的参数

function getHistory(params) {
   document.getElementById("table-cps-head").innerHTML ="";
   document.getElementById("table-cps").innerHTML= "";
   for (var i = 0; i<arrayHead.length; i++) {
       arrayHead[i].innerHTML ="";
    }
   for (var i = 0; i<arrayBody.length; i++) {
       arrayBody[i].innerHTML ="";
    }

    google.script.run.withSuccessHandler(cockpitTab).withFailureHandler(oops).getCockpit(params);
    google.script.run.withSuccessHandler(genereTable).withFailureHandler(oops).getallDatas(params);

}

函数getHistory（params）{
document.getElementById（“表cps头”）.innerHTML=“”；
document.getElementById（“表cps”）.innerHTML=“”；
对于（var i=0；iYou可以执行以下操作：

实现一个按钮，该按钮将与
google.script一起运行。运行一个函数一个读取当前电子表格版本的应用程序脚本函数

将电子表格
数据
与传递到JS函数中
动态创建链接到动态创建的新HTML页面的新按钮
将
数据
嵌入新的html页面
+每次单击
添加新电子表格
按钮时，将创建一个新网站，其中包含电子表格的当前版本
数据
——使用可跟踪
数据
历史记录
下面的代码说明了如何使用应用程序脚本动态读取数据，并将其传递回
html
文件，在该文件中可以使用它动态创建网站和按钮-请根据您的需要进行调整

var url=“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”；
var ss=SpreadsheetApp.openByUrl（url）；
var cps=ss.getSheetByName（“驾驶舱2019”）；
var sts=ss.getSheetByName（“TCD-蒸汽”）；
var数据=[cps，sts]；
函数doGet（e）{
var tmp=HtmlService.createTemplateFromFile（“页面”）；
返回tmp.evaluate（）；
}
函数getSheetDetails（数据）{
var rows=datas.getLastRow（）；
var cols=datas.getLastColumn（）；
返回datas.getRange（1,1，rows，cols）.getValues（）；
}
函数getallDatas（）{
var allSheets=[]
对于（变量i=0；i


函数genereTable（数据）{
...
}
功能添加按钮（数据）{
var d=新日期（）；
var newButton=document.createElement（“输入”）；
newButton.type=“按钮”；
newButton.value=“这是在“+d”上创建的新报告；
newButton.name=“Button”+d；
newButton.onclick=函数makePage（body）{
可生成（数据）；
//有关如何在此处实现新makePage（）函数的详细信息：https://stackoverflow.com/questions/32379444/how-do-i-create-a-new-html-webpage-onclick
};
document.body.appendChild（newButton）；
}
您能否提供当前Web应用程序中的代码？这将使您更容易理解如何修改代码以实现报告历史记录。此外，我不完全理解您关于新电子表格id的陈述-是否希望在每次编辑后将电子表格另存为新电子表格（使用新id）？我添加了一些代码。对于新的spreadsheat，这意味着什么。如果我创建新的电子表格，这将有一个新的id。有人会想，（不想为此发帖），你知道如何使用谷歌应用程序滚动查看吗？那些iframe会用“a href=”给我打开一个新页面“…奇怪的行为所以，你认为这是做我想做的事情的最佳方式吗？复制电子表格，创建新的html页面，并在下拉列表中添加链接？我相信你没有提供完整的代码（例如，我看不到如何以及何时调用不同的应用程序脚本函数），因此我很难理解您项目的全部范围，但是如果您想在单击按钮时创建新的电子表格，并将您的报告存储在新的电子表格中而不是旧的电子表格中，您可以按照上面的说明进行操作。您无需创建新的html页面，只需创建新的电子表格（以及新的文件ID和URL）在每次点击按钮时。我相信我确实需要创建html页面来显示我在web应用程序上创建的新副本。您的web部署的URL是否已经不是您的html页面？您可以动态（使用onSubmit或onClick等触发器）运行JS（并在其中运行应用程序脚本）将向您的网页添加新菜单项和链接的功能。非常感谢您的帮助，但我可能没有说清楚。我的代码中有链接部分（不是全部，因为是多余的）。我想实现的是，在我的html页面中动态显示每周保存的所有电子表格。为此，正如您所建议的，我可以通过按钮创建电子表格的副本，（我可以管理），但我很难知道如何显示副本并在我的html页面中添加链接
function createSsheet(date) {
  var dest = DriveApp.getFolderById("xxxxxxx");
  DriveApp.getFileById(SpreadsheetApp.openByUrl("xxxx").getId()).makeCopy("Report: " + date, dest);
  return true ;
} 

 <ul id="dropdown1" class="dropdown-content">
  <? for(var i =0; i<list.length; i++) {?>
  <li><a href="#" onClick="getHistory(<?=list[i]?>)" target="_self"><?= listNames[i] ?></a> </li>
  <?} ?>

function getHistory(params) {
   document.getElementById("table-cps-head").innerHTML ="";
   document.getElementById("table-cps").innerHTML= "";
   for (var i = 0; i<arrayHead.length; i++) {
       arrayHead[i].innerHTML ="";
    }
   for (var i = 0; i<arrayBody.length; i++) {
       arrayBody[i].innerHTML ="";
    }

    google.script.run.withSuccessHandler(cockpitTab).withFailureHandler(oops).getCockpit(params);
    google.script.run.withSuccessHandler(genereTable).withFailureHandler(oops).getallDatas(params);

}


var url = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
var ss = SpreadsheetApp.openByUrl(url);
var cps = ss.getSheetByName("Cockpit 2019");
var sts = ss.getSheetByName("TCD - STEAM");
var datas= [cps, sts];

function doGet(e) {
  var tmp = HtmlService.createTemplateFromFile("page");
  return tmp.evaluate(); 
}

function getSheetDetails(datas) {
  var rows = datas.getLastRow();
  var cols = datas.getLastColumn();
  return datas.getRange(1,1,rows, cols).getValues();
}

function getallDatas() {
  var allSheets = []
  for(var i = 0; i< datas.length; i++){
     var temp = 0;
    temp = getSheetDetails(datas[i]);
    allSheets.push(temp);
  }
return allSheets
}

 <body>
  <input type="button" onClick="google.script.run
          .withSuccessHandler(addButton)
          .getallDatas()"  value="Add new Spreadsheet">
  <script>      
function genereTable(data) {
       ...
}

function addButton(data) {
  var d = new Date();
  var newButton = document.createElement("input");
  newButton.type = "button";
  newButton.value = "This is the new report created on "+d; 
  newButton.name = "Button "+d; 
  newButton.onclick = function makePage(body) { 
  genereTable(data);
 // more information how to implement a new makePage() function here: https://stackoverflow.com/questions/32379444/how-do-i-create-a-new-html-webpage-onclick
  };
    document.body.appendChild(newButton); 
}
</script>
</body>