Google apps script 如何在用户使用GoogleApps脚本提交数据后提供正确的html_Google Apps Script

Google apps script 如何在用户使用GoogleApps脚本提交数据后提供正确的html

google-apps-script

Google apps script 如何在用户使用GoogleApps脚本提交数据后提供正确的html,google-apps-script,Google Apps Script,我有一个谷歌应用脚本Webapp，它提供一个简单的html表单。My Apps脚本函数processData（formdata）将表单数据作为Blob接收，如下所述。在处理完数据后，我想向用户返回另一个简单的html页面。我尝试过这样天真的方法： function processData(formdata){ // do something with the data process(formdata); return HtmlService .createHtmlOut

我有一个谷歌应用脚本Webapp，它提供一个简单的html表单。My Apps脚本函数

processData（formdata）

将表单数据作为Blob接收，如下所述。在处理完数据后，我想向用户返回另一个简单的html页面。我尝试过这样天真的方法：

function processData(formdata){
  // do something with the data
  process(formdata);
    return HtmlService
    .createHtmlOutputFromFile('html/final')
   }

但是，用户提交数据后，页面始终为空。我如何才能给用户一个正确的响应

这是@Cooper建议的第二种方法。我在html中添加了它，并使用了

和SuccessHandler

，但提交后页面仍为白色：

<!DOCTYPE html>
<html>
 <head>
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
function updateUrl() {
var div = document.getElementById('msg');
div.innerHTML = "<h1>Thanks for the submission</h1><p>You should be hearing from us soon</p>";
}
function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
    }
</script>
</head>

<body>
<div id="msg"></div>
<div class="container">
  <h1>FORM insert data</h1>
  <form id="myForm" onsubmit="handleFormSubmit(this)">
    <div class="form-group">
      <label for="nameInput">enter your name</label><br />


函数updateUrl（）{
var div=document.getElementById（'msg'）；
div.innerHTML=“感谢您的提交您应该很快就会收到我们的来信”；
}
函数handleFormSubmit（formObject）{
google.script.run.withSuccessHandler（updateUrl.processForm（formObject）；
}
表单插入数据
输入您的姓名

。。。等等

[编辑]

我现在添加了

preventFormSubmit

函数，如Cooper在示例中所述。现在，在提交后，将显示消息。但是，完整的表格仍保留在页面上，我更希望只显示消息

也就是说，仅仅显示另一个html似乎并不容易。这是否意味着不可能有一个更复杂的Web应用程序，它需要更多的html页面和Google Apps脚本？

你是对的，该示例中存在一些问题，这是由于最近切换到v8引擎造成的。我没有使用doGet（），而是将其作为对话框运行。但这里有一个有效的版本

代码G.gs：

function runADialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah1'), 'MCVE')
}

function processForm(data) {
  SpreadsheetApp.getActive().toast('processForm');
  console.log('processForm');
  var file = Utilities.newBlob(data.bytes,data.mimeType,data.name)
  var driveFile = DriveApp.createFile(file);
  return driveFile.getUrl();
}

ah1.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function preventFormSubmit() {
        var forms=document.querySelectorAll('form');
        for (var i=0;i<forms.length;i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      function handleFormSubmit(formObject) {
        console.log('handleFormSubmit');
        const file = formObject.myFile.files[0];
        console.log(file);
        const fr = new FileReader();
        fr.onload = function(e) {
          const obj = {name:file.name,mimeType: file.type,bytes:[...new Int8Array(e.target.result)]};
          google.script.run.withSuccessHandler(updateUrl).processForm(obj);
        }
        fr.readAsArrayBuffer(file);
      }
      
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      function preventFormSubmit() {
        var forms=document.querySelectorAll('form');
        for (var i=0;i<forms.length;i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      function handleFormSubmit(formObject) {
        console.log('handleFormSubmit');
        const file = formObject.myFile.files[0];
        console.log(file);
        const fr = new FileReader();
        fr.onload = function(e) {
          const obj = {name:file.name,mimeType: file.type,bytes:[...new Int8Array(e.target.result)]};
          google.script.run
          .withSuccessHandler(function(url){ 
             updateUrl(url);
             google.script.run
             .withSuccessHandler(function(obj){
               document.getElementById("msg").innerHTML="<h1> Thanks for Submitting that Image<h1><p>" + obj.msg + "</p>";
               
             })
             .getServerInfo();
           })
          .processForm(obj);
        }
        fr.readAsArrayBuffer(file);
      }
      
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
    <div id="msg"></div>
 </body>
</html>

ah1.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function preventFormSubmit() {
        var forms=document.querySelectorAll('form');
        for (var i=0;i<forms.length;i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      function handleFormSubmit(formObject) {
        console.log('handleFormSubmit');
        const file = formObject.myFile.files[0];
        console.log(file);
        const fr = new FileReader();
        fr.onload = function(e) {
          const obj = {name:file.name,mimeType: file.type,bytes:[...new Int8Array(e.target.result)]};
          google.script.run.withSuccessHandler(updateUrl).processForm(obj);
        }
        fr.readAsArrayBuffer(file);
      }
      
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      function preventFormSubmit() {
        var forms=document.querySelectorAll('form');
        for (var i=0;i<forms.length;i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      function handleFormSubmit(formObject) {
        console.log('handleFormSubmit');
        const file = formObject.myFile.files[0];
        console.log(file);
        const fr = new FileReader();
        fr.onload = function(e) {
          const obj = {name:file.name,mimeType: file.type,bytes:[...new Int8Array(e.target.result)]};
          google.script.run
          .withSuccessHandler(function(url){ 
             updateUrl(url);
             google.script.run
             .withSuccessHandler(function(obj){
               document.getElementById("msg").innerHTML="<h1> Thanks for Submitting that Image<h1><p>" + obj.msg + "</p>";
               
             })
             .getServerInfo();
           })
          .processForm(obj);
        }
        fr.readAsArrayBuffer(file);
      }
      
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
    <div id="msg"></div>
 </body>
</html>


函数preventFormSubmit（）{
var forms=document.queryselectoral（'form'）；
对于（var i=0；iI可能会在同一页面上与另一个div进行此操作，并在必要时使用google.script.run连接到服务器。这将是什么样子？我没有任何HTMLW方面的经验。你希望它是什么样子？如果愿意，你可以尝试一些像JS Fiddle这样的网站来使用不同的选项。也许你可以在html
和#msg{display:none；}
一起，然后使用Javascript将消息加载到div中，并使用document.getElementById（'msg'）。innerHTML=“感谢您的提交您应该很快就会收到我们的来信”
”
然后您可以使用$（'msg'）.css（'display'，'block'）更改样式
当然，你也必须在你的页面上包含JQuery。幸运的是，Google托管了所有这些类型的东西供人们使用。但是你也可以使用纯javascript。这很有趣，当我测试它时，它与你的示例类似，它也可以工作，所以问题是为什么在我的版本中它没有改变读取文件的方式如果你注意到里面有一个文件读取器，你就可以上传它。当你说你不使用doGet（）方法时，我有点困惑。但是，好吧，你需要一个，对吗？runADialoge（）在哪里被调用？