JSignature 和其他 HTML 表单字段到 Googlesheets

Question

I am trying to pass a JSignature field and other form fields to a google sheet.我正在尝试将 JSignature 字段和其他表单字段传递给 Google 表格。 I can get the signature to save to the drive and inserted into the googlesheet as an image.我可以获取签名以保存到驱动器并作为图像插入到 googlesheet 中。 But the fields 'name' and 'email' dont come through to the sheet.但是“姓名”和“电子邮件”字段没有出现在工作表中。 I think it something to do with我认为这与

google.script.run.writeForm(this.parentNode)

This is my sign.html这是我的 sign.html

<!DOCTYPE html>
<!-- from https://stackoverflow.com/questions/43054790/saving-image-to-spreadsheet-with-google-scripts/43058633#43058633-->
<html>
  <head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<body>
<form id="customerForm">

Please sign your name in the pad below: <br>

First Name: <input type="text" name="username"><br>
Email: <input type="email" name="useremail"><br>
<div id="signature"></div><br>
<img id="rendered" src=""style="display:none">
<input type="button" value="Save" onclick="renderSignature();saveImage();google.script.run.writeForm(this.parentNode)"/>

<!--<input type="button" value="Add to Sheet" onclick="saveImage()"/>
<input type="button" value="Close" onclick="google.script.host.close()" />-->
</form>
</body>

<script>

  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent'
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
  }

  function saveImage(){ //This sends the image src to saveImages function
  var bytes = document.getElementById('rendered').src
  console.log(bytes)
  google.script.run.saveImage(bytes)
  } 

</script>
</html>

At this is my code.gs这是我的代码.gs

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('sign')
    .setWidth(400)
    .setHeight(300);
   SpreadsheetApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');


}

function doGet() {
  return HtmlService
      .createTemplateFromFile('sign')
      .evaluate();
}


function saveImage(bytes){
  var dateObj = Date.now();
  var bytes = bytes.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png');
  var fileName = blob.setName("Signature "+dateObj).getName();
  var sigFolder = DriveApp.getFolderById("12ymURZrnC5Y4XYxYxCEpxJCHYU7V4Oz9")
  var url = sigFolder.createFile(blob).getId();



/*function insertImage(){
  var sigFolder = DriveApp.getFolderById("1p8Wt9SGJcbuwOw3UDz9RJA4pLDno7RCk")
  var fileURL = sigFolder.getId()*/
  Logger.log(url)

function writeForm (){

  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Register')
  var name = sign.username;
  var email = sign.useremail;
  var signature = '=image("https://drive.google.com/uc?export=view&id='+url+'")'
  var imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 4).setValues([[Date(), name,email,signature]]);
  }

}

Answer 1

In your scripts, I thought that you might have feel a issue for url in GAS.在您的脚本中，我认为您可能对 GAS 中的url感到有问题。 So how about this modification?那么这个修改怎么样呢？ I think that there are some solutions for your situation.我认为对于您的情况有一些解决方案。 So please think of this as one of them.因此，请将此视为其中之一。

Modification points :改装要点：

Merge writeForm() to saveImage() of Javascript.将writeForm()合并到 Javascript 的saveImage() 。
Retrieve username and useremail at saveImage() , and send them to saveImage() of GAS.在saveImage()检索username和useremail ，并将它们发送到 GAS 的saveImage() 。

Modified scripts :修改后的脚本：

HTML : HTML :

 <!DOCTYPE html> <html> <head></head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script> <body> <form id="customerForm"> Please sign your name in the pad below: <br> First Name: <input type="text" name="username"><br> Email: <input type="email" name="useremail"><br> <div id="signature"></div><br> <img id="rendered" src="" style="display:none"> <input type="button" value="Save" onclick="renderSignature();saveImage()"/> </form> </body> <script> $("#signature").jSignature({ 'background-color': 'transparent', 'decor-color': 'transparent' }); function renderSignature(){ $("img#rendered").attr("src",$('#signature').jSignature('getData','default')); } function saveImage(e){ //This sends the image src to saveImages function var bytes = document.getElementById('rendered').src; console.log(bytes); var sign = { username: document.getElementsByName('username')[0].value, useremail: document.getElementsByName('useremail')[0].value }; google.script.run.saveImage(bytes, sign); } </script> </html>

GAS : 气体：

 function saveImage(bytes, sign){ var dateObj = Date.now(); var bytes = bytes.split(",") var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png'); var fileName = blob.setName("Signature "+dateObj).getName(); var sigFolder = DriveApp.getFolderById("12ymURZrnC5Y4XYxYxCEpxJCHYU7V4Oz9"); var url = sigFolder.createFile(blob).getId(); Logger.log(url) var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Register'); var name = sign.username; var email = sign.useremail; var signature = '=image("https://drive.google.com/uc?export=view&id='+url+'")' var imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 4).setValues([[Date(), name,email,signature]]); }

If this was not what you want to do, I'm sorry.如果这不是你想要做的，我很抱歉。

JSignature 和其他 HTML 表单字段到 Googlesheets

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-04-14 04:04:07

Modification points :改装要点：

Modified scripts :修改后的脚本：

JSignature 和其他 HTML 表单字段到 Googlesheets

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-04-14 04:04:07

Modification points :改装要点：

Modified scripts :修改后的脚本：

解决方案1
1 已采纳 2018-04-14 04:04:07