Question

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

有关

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>

这是我的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()。
在username处检索useremail和saveImage()，并将其发送至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]]);
}

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

JSogature和其他HTML表单字段到Googlesheets

1 个答案:

修改要点：

修改过的脚本：