JSignature 和其他 HTML 表单字段到 Googlesheets

Question

我正在尝试将 JSignature 字段和其他表单字段传递给 google sheet。我可以获得签名以保存到驱动器并作为图像插入到 googlesheet 中。但是 'name' 和 'email' 字段没有传到 sheet。我认为这与

有关

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

这是我的sign.html

<!DOCTYPE html>
<!-- from 
<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>

这是我的 code.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

在您的脚本中，我认为您可能觉得 GAS 中的 url 存在问题。那么这个修改怎么样呢？我认为您的情况有一些解决方案。所以请将此视为其中之一。

修改点：

将 writeForm() 合并到 Javascript 的 saveImage()。
在saveImage()获取username和useremail，并将它们发送到GAS的saveImage()。

修改后的脚本：

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>

气体：

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]]);
}

如果这不是你想要的，我很抱歉。

JSignature 和其他 HTML 表单字段到 Googlesheets

JSignature and other HTML form fields to Googlesheets

html

google-apps-script

jsignature

google-sheets-api

修改点：

修改后的脚本：