Question

我写了一个脚本，该脚本创建了一个新的Google文档（歌词表模板）。现在，我想将该脚本插入到Google Web App脚本中，该脚本可以附加到（新）Google网站上的按钮上。当用户单击该按钮（称为“ New Song”之类的东西）时，将创建新歌曲模板，然后在浏览器选项卡中打开它，准备将其修改为新歌曲。除了打开现有的Google文档或表格等之外，我无法弄清楚如何使Web应用程序执行任何操作。换句话说，“ doGet”命令从不运行HTML代码来创建新的Google歌词文档。我创建歌词文档的工作代码如下：

第二部分：我重新整理了以下注释中引用的代码，可以创建并打开一个新的歌词文档，但是无法使脚本的格式化部分正常工作（如下所述）。

 function createNewLandscapeSong() {
   var doc = DocumentApp.create('Rename with song title');
   var title = "replace with song title"
   var url = doc.getUrl();
   var body = doc.getBody();
   var paragraph = body.insertParagraph(0, "");
   var text1 = paragraph.appendText("© replace with writer(s)");
  text1.setFontSize(8);
   var rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
    var style = {};
   body.insertParagraph(0, title)
       .setHeading(DocumentApp.ParagraphHeading.HEADING3);
   table = body.appendTable(rowsData);
   style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
   table.setAttributes(style);
 }

第二部分代码：

 function doGet(e){

  // create the doc
  var doc = createDoc()

  // save the doc to Drive
  var driveFile = DriveApp.createFile(doc).setName("New Lyric");

  // tell the user how to access it
  var fileURL = driveFile.getUrl();
  var fileName = driveFile.getName();

  var HTMLOutput = HtmlService.createHtmlOutput("<p>You made a new lyric doc.</p>"
  + "<p> You can access it here: "
  + '<a target="blank" href="' + fileURL + '">' + fileName + '</a></p>');
  return HTMLOutput
 }

  function createDoc() {
  var doc = DocumentApp.create('Rename with song title');
  // Code below not working
  var title = "replace with song title and then link this text to song title cell in Catalog Spreadsheet"
  var id = doc.getId();
  var body = doc.getBody();
  var paragraph = body.insertParagraph(0, "");
  var text1 = paragraph.appendText("© replace with writer(s)");
text1.setFontSize(8);
  var rowsData = [['PUT FIRST VERSE/CHORUS HERE.  (SUGGEST USE ALL CAPS.)', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  var style = {};
      body.insertParagraph(0, title)
     .setHeading(DocumentApp.ParagraphHeading.HEADING3);
      table = body.appendTable(rowsData);
      style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
      table.setAttributes(style);
  // End of code section not working
  return doc
 }

Answer 1

用户单击该按钮您将事件监听器置于按钮上，然后触发一个打开文件的函数

  in the HTML - the BUTTON
   <div>                   
     <div id="submit">OPEN THE FILE IN A NEW TAB</div> 
   </div>
 in the SCRIPT of the HTML
 <script>
  document.getElementById("submit").addEventListener("click",openFile)
  function openFile() {
    window.open('url');
    google.script.run.createNewLandscapeSong();  
  }
</script>

Answer 2

doGet()仅在最初在浏览器中打开Web App时运行。对服务器端脚本的任何其他调用都必须使用client-to-server communication。
从服务器端脚本中extract your HTML可能更容易。这将帮助您在网页HTML中编写代码以调用服务器端函数。

因此，您将拥有 2个单独的文件：Code.gs和Index.html。

Code.gs

/*
  This function simply returns the html we've created to the client for display.
*/
function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}


/*
The scripts below this line are to alow the client-side scripts from the Index.html page call and get information from the server-side script.
*/

function createNewLandscapeSong() {
  var doc = DocumentApp.create('Rename with song title');
  var title = "replace with song title"
  var url = doc.getUrl();
  var body = doc.getBody();
  var paragraph = body.insertParagraph(0, "");
  var text1 = paragraph.appendText("© replace with writer(s)");
  text1.setFontSize(8);
  var rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  var style = {};
  body.insertParagraph(0, title)
  .setHeading(DocumentApp.ParagraphHeading.HEADING3);
  table = body.appendTable(rowsData);
  style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
  table.setAttributes(style);

  return {
    url: url,
    title: title
  };
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="button" value="Make Doc"
      onclick="google.script.run
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeSong()" />
    <script>
       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

因此，该网页调用了服务器端代码以创建文档并检索其url。然后，我们使用该URL在新标签页中打开该文档。

如何创建可以创建新的Google Doc，然后在浏览器标签中打开它的Google Web App？

2 个答案: