如何创建可以创建新 Google 文档的 Google Web 应用程序，然后在浏览器选项卡中打开它？

Question

我编写了一个脚本来创建一个新的 google 文档（一个歌词 sheet 模板）。现在，我想将该脚本插入到 Google Web 应用程序脚本中，我可以将该脚本附加到（新）Google 站点上的按钮。当用户单击该按钮（名称类似于 "New Song"）时，将创建新歌曲模板，然后在浏览器选项卡中打开，准备将其修改为新歌曲。除了打开现有的 Google 文档或 sheet 等之外，我不知道如何让 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 应用程序时运行。必须使用 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 文档的 Google Web 应用程序，然后在浏览器选项卡中打开它？

How do I create Google Web App that can create new Google Doc, then open it in browser tab?

google-docs

google-apps-script