JSignature 和其他 HTML 表单字段到 Googlesheets答案

【问题标题】：JSignature and other HTML form fields to GooglesheetsJSignature 和其他 HTML 表单字段到 Googlesheets
【发布时间】：2018-04-12 10:45:51
【问题描述】：

我正在尝试将 JSignature 字段和其他表单字段传递给 Google 工作表。我可以将签名保存到驱动器并作为图像插入到 googlesheet 中。但是“姓名”和“电子邮件”字段不会出现在表格中。我认为这与它有关

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

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

这是我的代码.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]]);
  }

}

【问题讨论】：

标签： html google-apps-script google-sheets-api jsignature

【解决方案1】：

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

修改点：

将 Javascript 的 writeForm() 合并到 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]]);
}

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

【讨论】：